Palette de boutons

Avec ce plugin, dans sa dernière version, vous bénéficiez d’une vingtaine de styles prédéfinis, combinables, pour former des boutons de couleurs et de tailles différentes :

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 [*].

Footnotes

[*Dans la V1 il fallait utiliser le sélecteur .submit (et non .btn introduit en V2), soit :

.submit { background-color: pink; }
.submit:hover { background-color: red; }

updated on 3 May 2019

Discussion

Une discussion

  • 1

    Bonjour,

    L’information précisée sur cette page sur les formes disponibles (V2) dont
    circle, précise “uniquement sur boutons carrés” alors que cette information n’est pas présente sur la page de Varicelle...qui permet le téléchargement des deux versions sans explication concernant les nouveautés de la V2...
    En effet avec la version 2.2.5 la forme de bouton qui devrait être circulaire « circle », est ovoïde, si vous l’utilisez comme les autres.
    Cordialement
    Michel
    http://laccreteil.fr

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom