Button
A minimally designed button.
Primary
HTML
<button class="primary">
Button
</button>
CSS
button {
font-weight: 500;
border: 0.5px solid;
border-radius: 6px;
text-decoration: none;
cursor: pointer;
padding: 0.8em 1.2em;
}
button:hover {
opacity: 0.9;
}
.primary {
background-color: white;
color: black;
border-color: white;
}
Secondary
HTML
<button class="secondary">
Secondary
</button>
CSS
button {
font-weight: 500;
border: 0.5px solid;
border-radius: 6px;
text-decoration: none;
cursor: pointer;
padding: 0.8em 1.2em;
}
button:hover {
opacity: 0.9;
}
.secondary {
background-color: gray;
color: white;
border-color: gray;
}
Outline
HTML
<button class="outline">
Outline
</button>
CSS
button {
font-weight: 500;
border: 0.5px solid;
border-radius: 6px;
text-decoration: none;
cursor: pointer;
padding: 0.8em 1.2em;
}
.outline {
background-color: transparent;
color: white;
border-color: white;
}
.outline:hover {
background-color: gray;
}
Ghost
HTML
<button class="ghost">
Ghost
</button>
CSS
.ghost {
background-color: transparent;
color: white;
border-color: transparent;
}
.ghost:hover {
background-color: gray;
border-color: gray;
}
Icon
HTML
<button class="icon">
<img src="../../media/icons/copy.svg" />
</button>
CSS
button {
font-weight: 500;
border: 0.5px solid;
border-radius: 6px;
text-decoration: none;
cursor: pointer;
padding: 0.8em 1.2em;
}
.icon {
background-color: transparent;
border-color: gray;
padding: 1em;
}
.icon img {
height: 28px;
width: 28px;
}
.icon:hover {
background-color: gray;
}
With Icon
HTML
<button class="with-icon">
Next
<img src="../../media/icons/arrow-right.svg" />
</button>
CSS
button {
font-weight: 500;
border: 0.5px solid;
border-radius: 6px;
text-decoration: none;
cursor: pointer;
padding: 0.8em 1.2em;
}
.with-icon {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border-color: white;
gap: 0.5em;
}
.with-icon img {
height: 18px;
width: 18px;
}