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