abdullahtarawneh.com/assets/scss/components/button.scss

84 lines
861 B
SCSS

.button {
width: 100%;
@media (min-width: 33.75em) {
width: max-content;
}
font-size: clamp(1em,2vw,1em);
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 0.25em;
font-weight: 700;
gap: 1em;
&:link {
}
&:visited {
}
&:focus {
padding: 1em;
border-radius: 0.25em;
@include focus-outline;
}
&:hover {
}
&:active {
}
}
.button.primary {
background: var(--primary-accent);
color: var(--primary-accent-text);
&:link {
}
&:visited {
}
&:focus {
}
&:hover {
}
&:active {
}
}
.button.secondary {
background: white;
border: 2px solid var(--primary-accent);
color: var(--primary-accent);
&:link {
}
&:visited {
}
&:focus {
}
&:hover {
background: var(--primary-accent-transparent);
}
&:active {
}
}