botascopia-webiste-static/assets/css/components/_buttons.scss

101 lines
1.8 KiB
SCSS
Raw Normal View History

2026-02-15 23:14:52 +01:00
@use "../abstracts/mixins.scss" as *;
2026-02-11 10:39:01 +01:00
2026-01-09 12:23:22 +01:00
.btn--solid{
font-weight: 600;
font-size: 1.2rem;
background-color: var(--color);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
height: 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%;
}
2026-02-11 10:39:01 +01:00
}
2026-02-15 23:14:52 +01:00
.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);
}
}
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;
}
}
}