src/components/Button/index.module.css
.button {
display: block;
width: 100%;
color: var(--link-color);
text-align: center;
border-radius: var(--border-radius);
padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
transition-property: all;
background: var(--box-background-color);
border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
font-size: var(--font-size-small);
text-transform: uppercase;
cursor: pointer;
}
@media (min-width: 30rem) {
.button {
display: inline-block;
width: auto;
}
}
.button svg {
margin-right: calc(var(--spacer) / 4);
transition: 0.2s var(--easing);
margin-bottom: -0.15rem;
width: var(--font-size-small);
height: var(--font-size-small);
}
.button:hover,
.button:focus {
border-color: var(--link-color);
transform: translate3d(0, -0.1rem, 0);
box-shadow: var(--box-shadow);
}
.button:active {
transition: none;
background: var(--box-background-color);
}