Documentation
Documentation - Boutons.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Boutons
Créez des boutons élégants et interactifs avec Marssel.
Bouton de base
Un simple bouton avec fond et texte
<button class="bg-[blue] c-[white] px-[1.5rem] py-[0.75rem] rounded-[10px]">
Click me
</button>Variantes de boutons
Différents styles pour différentes actions
<button class="bg-[0B63F3] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500]">
Primary
</button>
<button class="bg-[transparent] border-[2px_solid_0B63F3] c-[0B63F3] px-[20px] py-[10px] rounded-[8px] cursor-[pointer] font-weight-[500]">
Outline
</button>
<button class="bg-[10b981] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500]">
Success
</button>
<button class="bg-[D41212] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500]">
Danger
</button>Boutons interactifs
Avec effets au survol et au clic
<button class="bg-[0B63F3] bg-[2563eb]:hover c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500] transition-[all_0.2s] transform-[scale(0.95)]:active">
Survole-moi
</button>Différentes tailles
<button class="bg-[0B63F3] c-[white] px-[12px] py-[6px] rounded-[6px] border-[none] cursor-[pointer] font-size-[12px] font-weight-[500]">
Petit
</button>
<button class="bg-[0B63F3] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-size-[14px] font-weight-[500]">
Normal
</button>
<button class="bg-[0B63F3] c-[white] px-[28px] py-[14px] rounded-[10px] border-[none] cursor-[pointer] font-size-[16px] font-weight-[500]">
Grand
</button>