Bouton

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.

<div class="wpeo-button button-main">
	<span>Label bouton</span>
</div>
.button-main
.button-red
.button-yellow
.button-blue
.button-green
.button-light
.button-grey
.button-dark
.button-transparent

Bordered

<div class="wpeo-button button-main button-bordered">
	<span>Label bouton</span>
</div>
.button-main
.button-red
.button-yellow
.button-blue
.button-green
.button-light
.button-grey
.button-dark

Icone

Icone avant le texte

<div class="wpeo-button button-main">
	<i class="button-icon fas fa-heart"></i>
	<span>Label bouton</span>
</div>

Icone après le texte

<div class="wpeo-button button-main">
	<span>Label bouton</span>
	<i class="button-icon fas fa-heart"></i>
</div>
Bouton
Bouton

Carré

<div class="wpeo-button button-square-30"><i class="button-icon fas fa-heart"></i></div>
<div class="wpeo-button button-square-40"><i class="button-icon fas fa-heart"></i></div>
<div class="wpeo-button button-square-50"><i class="button-icon fas fa-heart"></i></div>
<div class="wpeo-button button-square-60"><i class="button-icon fas fa-heart"></i></div>

Arrondis

<div class="wpeo-button button-radius-1"><span>Label Bouton</span></div>
<div class="wpeo-button button-radius-2"><span>Label Bouton</span></div>
<div class="wpeo-button button-radius-3"><span>Label Bouton</span></div>
<!-- Pour faire un bouton totalement arrondi, il est conseillé d utiliser la propriété .button-square -->
<div class="wpeo-button button-square-40 button-rounded"><i class="button-icon fas fa-heart"></i></div>
.button-radius-1
.button-radius-2
.button-radius-3

Désactivé

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

<div class="wpeo-button button-disable"><span>Label Bouton</span></div>
.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.

<div class="wpeo-button button-disable button-event"><span>Label Bouton</span></div> <!-- Les animations sont activées -->
.button-disabled.button-event

Taille

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

<div class="wpeo-button button-size-small"><span>Label Bouton</span></div>
<div class="wpeo-button button-size-large"><span>Label Bouton</span></div>
.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.

<!-- Chargement de l action -->
<div class="wpeo-button button-progress button-load"><span>Label Bouton</span></div>
<!-- Action réussie -->
<div class="wpeo-button button-progress button-success"><span>Label Bouton</span></div>
<!-- Action échouée -->
<div class="wpeo-button button-progress button-error"><span>Label Bouton</span></div>

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