Files
myep/assets/styles/components/button.css
T

50 lines
1023 B
CSS

.button {
@apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
@apply uppercase leading-none text-center;
@apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
}
.button--small {
@apply px-2 py-1 md:px-4 text-xs sm:text-sm;
}
.button--full {
@apply block w-full;
}
.bg-button {
@apply bg-none bg-primary-dark text-white;
@apply hover:bg-badge-gradient;
}
.bg-button--active,
.bg-button--secondary {
@apply bg-badge-gradient text-white;
@apply hover:bg-none hover:bg-pink;
}
.bg-button--muted {
@apply bg-zinc-300 hover:bg-zinc-300;
}
.bg-button--dark {
@apply bg-primary-dark;
}
.bg-button--light {
@apply bg-white border-2;
@apply font-bold;
@apply border-primary-light text-primary;
}
.bg-button--light:hover,
.bg-button--light.button--active {
@apply bg-white;
@apply border-secondary text-secondary;
}
.button[disabled] {
@apply cursor-not-allowed;
}