website/sass/component/buttons.scss
2023-11-21 03:44:11 +02:00

48 lines
No EOL
1.1 KiB
SCSS

@import "../variables/media";
.button {
width: fit-content;
padding: 12rem 16rem;
min-width: 133rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font: var( --nav-link);
color: var(--common-white);
text-decoration: none;
border-radius: var(--border-r-8);
transition: background-color var(--transition);
gap: 10rem;
&:hover {
transition: background-color var(--transition);
background-color: var(--common-green-hover);
}
&--main {
background-color: var(--common-green);
}
&--transparent {
color: var(--green-button);
transition: transform var(--transition);
padding: 10rem 0;
min-width: fit-content;
&:hover {
transition: background-color var(--transition);
background-color: transparent;
transition: transform var(--transition);
transform: scale(1.1);
}
}
&--card {
max-width: 170rem;
text-align: left;
background-color: var(--common-green-btn-social);
font: var(--p-sub);
gap: 10rem;
padding: 8rem;
flex-direction: row-reverse;
svg {
transform: scaleX(-1);
}
}
}