Buttons, une librairie CSS pour créer des boutons personnalisables

24 juin 2013

Buttons est une bibliothèque CSS pour réaliser des boutons souples, modernes et personnalisables. Disponibles sous plusieurs formes (flat, circulaire, carré, etc) et sous plusieurs couleurs, la librairie propose une version Sass / Compass, ou une feuille de style directement prête à l’emploi.

Des boutons sous toutes les formes

Les boutons sont totalement personnalisables à l’aide de variables qui peuvent être facilement étendues. Vous pouvez utiliser la librairie de façon « classique », sans forcément passer par Compass, en vous contentant des classes CSS existantes dans la feuille de style par défaut. Chaque bouton est designé différemment au rollover et au focus, ainsi qu’à l’état disabled.

buttons_css

La librairie propose 8 types de boutons (classes CSS) qui peuvent être combinés selon les cas. Parmi eux, le type flat qui permet de réaliser un bouton minimaliste à la sauce Flat design, simple et sans textures ni effets de volumes. Il y également un type icons qui permet de joindre une icône à votre bouton, icône générée par une police à inclure en plus de la librairie. Vous retrouverez aussi un bouton de type block qui permet d’avoir un bouton qui prend toute la largeur de son conteneur.

Voici quelques exemples :

flat_button

Flat button

rounded_button

Rounded button

glow_button

Glow button

Mise en place et utilisation

Pour utiliser la librairie de façon « classique », il vous suffit de télécharger le fichier .zip contenant la librairie, puis de l’inclure dans votre fichier HTML. Vous devez inclure aussi la typographie font-awesome si vous avez besoin des boutons avec icônes.

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/buttons.css">

Il ne vous reste plus qu’à créer vos boutons HTML avec les classes dont vous avez besoin, par exemple :

<a href="#" class="button button-circle button-primary">press me</a>

L’autre façon d’utiliser la librairie Buttons est de passer par Sass et Compass en forkant le projet sur GitHub.

Requis : Aucun
Compatibilité : Navigateurs modernes
Démonstration : http://alexwolfe.github.io/Buttons/
Licence : Non renseigné

Commentaires

  • Benjamin Derepas

    Dommage pour ceux qui n’utilisent pas de pre-processeur comme moi :)

    • « la librairie propose une version Sass / Compass, ou une feuille de style directement prête à l’emploi »