62 lines
1.5 KiB
CSS
62 lines
1.5 KiB
CSS
.cta {
|
|
@apply block w-fit my-2 text-base font-bold;
|
|
&--button {
|
|
@apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit;
|
|
}
|
|
&--circular {
|
|
@apply rounded-full focus:rounded-full aspect-square w-12 flex items-center justify-center;
|
|
outline-offset: 5px !important;
|
|
}
|
|
&--primary {
|
|
@apply bg-primary text-white
|
|
hover:bg-primary-hover;
|
|
}
|
|
&--secondary {
|
|
@apply bg-secondary text-white
|
|
hover:bg-secondary-hover;
|
|
}
|
|
|
|
&--outline {
|
|
@apply border-2 bg-transparent hover:bg-gray;
|
|
}
|
|
/* &--outline-secondary {
|
|
@apply border-secondary border;
|
|
} */
|
|
&--shadowed {
|
|
@apply shadowed;
|
|
&:hover {
|
|
@apply bg-secondary text-white;
|
|
}
|
|
}
|
|
&--streched {
|
|
@apply after:absolute after:inset-0;
|
|
}
|
|
|
|
&.cta--button.cta--outline {
|
|
@apply border-black text-black;
|
|
}
|
|
|
|
&--read-more {
|
|
@apply flex text-primary hover:text-secondary w-full justify-between items-center mt-auto;
|
|
}
|
|
&--with-arrow-button {
|
|
.cta_arrow_button {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
&:hover .cta_arrow_button {
|
|
filter: invert(27%) sepia(69%) saturate(6074%) hue-rotate(348deg) brightness(87%)
|
|
contrast(100%);
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.external-link {
|
|
@apply font-semibold hover:text-secondary flex w-fit items-center;
|
|
&:after {
|
|
@apply ml-2 block;
|
|
content: url('../resources/img/graphic-assets/icone-external-link.svg');
|
|
transform: translateY(1px);
|
|
}
|
|
}
|