## Boutons

Le module permet de nombreuses personnalisations en ajoutant des classes à celle de base : `"wpeo-button"`

### Simple

Si aucune couleur n'est précisée, la classe `"button-main"` est appliquée.

.button-main
.button-red
.button-yellow
.button-blue
.button-green
.button-light
.button-grey
.button-dark
.button-transparent

### Bordered

.button-main
.button-red
.button-yellow
.button-blue
.button-green
.button-light
.button-grey
.button-dark

### Avec button-icone

Bouton
Bouton

### Carré

### Arrondis

.button-radius-1
.button-radius-2
.button-radius-3

### Désactiver

La classe utilise la propriété `"pointer-events: none;"` pour désactiver totalement les actions sur le bouton.

.button-disabled

Il existe certains cas où vous souhaitez que votre bouton ai seulement l'apparence d'être désactivé car vous avez besoin d'accrocher des évènements dessus.
Utilisez dans ce cas la classe `"button-event"` pour réactiver la propriété CSS pointer event.

Exemple : Votre bouton semble désactivé et vous pouvez afficher un message d'erreur lorsque l'on clique dessus.

.button-disabled.button-event

### Taille

Note : Il n'y a pas besoin d'utiliser de classe pour la taille standard

.button-size-small
taille standard
.button-size-large

### Progress

Cette classe permet l'animation d'un bouton en cas de chargement, réussite et échec d'une action. Il suffit de rajouter la classe en fonction du code javascript.

Cliquer sur les boutons pour activer les animations :

.button-load
.button-success
.button-error

### Autres classes

- button-margin Espace en haut et en bas du bouton
- button-strong label du bouton en gras
- button-uppercase label du bouton en capital
- button-float-left Le bouton se positionne à gauche du contenu
- button-float-right Le bouton se positionne à droite du contenu