58 lines
1.4 KiB
CSS
58 lines
1.4 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 aspect-square w-12 flex items-center justify-center;
|
|
}
|
|
&--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;
|
|
}
|
|
&--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);
|
|
}
|
|
}
|