Palette de boutons

Nomenclature

Tailles, couleurs et formes peuvent être combinées entres elles :

• Sémantique (V2) :
  • primary (peu utilisable correctement dans SPIP)
  • secondary (sans effet = par défaut)
  • success
  • info
  • warning
  • danger
  • light : pour redonner l’apparence d’un lien
  • disabled : s’applique automatiquement aux boutons inactifs
• Couleurs disponibles :
  • purple
  • pink
  • red
  • orange
  • yellow
  • green
  • blue
  • black
  • gray
  • white
  • metal : façon alu brossé
  • spip : aux couleurs de SPIP (violet et or)
• Tailles disponibles :
  • small
  • big
  • super
• Formes disponibles (V2) :
  • circle : uniquement sur boutons carrés (de largeur et hauteurs identiques)
  • expand : pour étendre à toute la largeur disponible

Voyez la demo !

Un tableau des principaux styles de boutons est disponible dans votre site SPIP :
-  Affichez la page de démo : ?page=demo/varicelle
-  Ou insérez le modèle <varicelle|>, dans un article par exemple
-  Si vous utilisez ZPIP, affichez directement ?page=varicelle

Personnalisation CSS

Vous pouvez personnaliser l’apparence des boutons de cette palette, dans votre feuille de style, par surcharge CSS. Par exemple, pour définir la couleur par défaut de vos boutons, en particulier ceux des formulaires générés par SPIP, déclarez [*] :

.btn { background-color: pink; border-color: pink; }
.btn:hover { background-color: red; border-color: red; }

Notez que, si vos squelettes en contiennent, les boutons d’administration du site public sont impactés par ce plugin, qui propose donc un habillage spécifique simplifié pour ceux-ci. Si besoin, surchargez le style de .spip-admin .btn [*].