91 lines
1.9 KiB
CSS
91 lines
1.9 KiB
CSS
.btnPrimary {
|
|
@apply bg-[#2a8d57] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;
|
|
|
|
/* Bordure */
|
|
border-color: #1e7a43;
|
|
|
|
/* Survol */
|
|
&:hover {
|
|
@apply bg-[#1e7a43] border-[#155d2e];
|
|
}
|
|
|
|
/* Clique (État actif) */
|
|
&:active {
|
|
@apply bg-[#1b6b38] border-[#155d2e];
|
|
}
|
|
|
|
/* Focus (État focus) */
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px rgba(42, 141, 87, 0.5);
|
|
}
|
|
}
|
|
|
|
.btnSecondary {
|
|
@apply bg-[#2f4858] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;
|
|
|
|
/* Bordure */
|
|
border-color: #1e3c46;
|
|
|
|
/* Survol */
|
|
&:hover {
|
|
@apply bg-[#1e3c46] border-[#16323a];
|
|
}
|
|
|
|
/* Clique (État actif) */
|
|
&:active {
|
|
@apply bg-[#193d49] border-[#16323a];
|
|
}
|
|
|
|
/* Focus (État focus) */
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px rgba(47, 72, 88, 0.5);
|
|
}
|
|
}
|
|
|
|
.btnThird {
|
|
@apply bg-[#c0ab4d] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;
|
|
|
|
/* Bordure */
|
|
border-color: #b0a139;
|
|
|
|
/* Survol */
|
|
&:hover {
|
|
@apply bg-[#b0a139] border-[#9a8b2b];
|
|
}
|
|
|
|
/* Clique (État actif) */
|
|
&:active {
|
|
@apply bg-[#9a8b2b] border-[#6f6a1c];
|
|
}
|
|
|
|
/* Focus (État focus) */
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px rgba(192, 171, 77, 0.5);
|
|
}
|
|
}
|
|
|
|
.btnAnnule {
|
|
@apply bg-[#d54f45] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;
|
|
|
|
/* Bordure */
|
|
border-color: #a73a2d;
|
|
|
|
/* Survol */
|
|
&:hover {
|
|
@apply bg-[#a73a2d] border-[#8b2d1e];
|
|
}
|
|
|
|
/* Clique (État actif) */
|
|
&:active {
|
|
@apply bg-[#90271e] border-[#8b2d1e];
|
|
}
|
|
|
|
/* Focus (État focus) */
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px rgba(213, 79, 69, 0.5);
|
|
}
|
|
} |