botascopia-webiste-static/assets/css/components/_buttons.scss
Julie Blanc 3c10e88b18 search
2026-02-16 14:04:45 +01:00

106 lines
No EOL
1.9 KiB
SCSS

@use "../abstracts/mixins.scss" as *;
.btn--solid{
font-weight: 600;
font-size: 1.2rem;
background-color: var(--color-txt);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(var(--unit)*1.5);
min-width: calc(var(--unit)*1.5);
border-radius: var(--radius-btn);
cursor: pointer;
a{
color: white;
text-decoration: none;
padding: 0px 1ch;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
.btn-action {
border: 1px solid var(--color-txt-light);
height: calc(var(--unit)*1.25);
background-color: var(--white);
border-radius: var(--radius-btn);
cursor: pointer;
a{
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
color: var(--color-txt);
padding: 0 1ch;
}
.icon{
@include icon(20px);
}
.text{
font-size: var(--fs-small);
font-weight: 500;
}
&:hover{
border-color: var(--color-txt);
}
}
.btn-download .icon{
@include icon(16px);
}
label.btn-action{
display: inline-flex;
align-items: center;
gap: 1ch;
text-decoration: none;
color: var(--color-txt);
padding: 0 1ch;
.text{
font-weight: 700;
}
}
.link-with-arrow{
a{
text-decoration: none;
color: var(--color-txt);
font-size: var(--fs-small);
&::after{
content: "";
font-family: var(--font-title);
font-size: 0.9em;
position: relative;
left: 1.5ch;
transition: left .4s ease-in-out;
text-decoration: 1px underline transparent;
}
}
&:hover{
opacity: 0.8;
a::after{
left: 2.5ch;
}
}
}