Créer des boutons animés

Créer des boutons "design" pour votre site internet avec un petit code HTML et CSS.

Trait 1hvr-fade   hvr-hollow   hvr-sweep-to-right

La première chose à faire est de copier le code CSS du bouton et le coller dans Configuration - Apparence - Modifier/Ajouter du CSS  au thème :

Modifier ajouter du code css au theme

Une fois que votre code CSS est mis en place, il faudra juste ajouter le code HTML dans votre Éditeur  Editeur html à chaque fois que vous voudrez utiliser un bouton.

 

 

Trait 1

Code CSS à insérer dans la partie CSS de votre site dans Configuration - Apparence

/* Trait1 */
.trait1 {
  transition: 0.3s ease;
  color: #000000;/* Couleur du texte */
  font-size: 20px;/* Taille du texte */
  text-decoration: none;
  border-top: 0px solid #dc4747;
  border-bottom: 0x solid #dc4747;
  padding: 20px 0;
  margin: 0 20px;/* Marge devant le bouton */
}
.trait1:hover {
  border-top: 1px solid #dc4747;/* Epaisseur du trait du haut, couleur */
  border-bottom: 1px solid #dc4747;/* Epaisseur du trait du bas, couleur */
  padding: 6px 0; /* Marge entre les traits et le texte */
}

 

Code HTML à insérer dans votre éditeur HTML :

<a class="trait1" href="VOTRE LIEN">VOTRE TEXTE</a>

 

 

 

Trait 2

Code CSS à insérer dans la partie CSS de votre site dans Configuration - Apparence

/* Trait2 */
.trait2 {
transition: 0.3s ease;
color: #000000;/* Couleur du texte */
font-size: 20px;/* Taille du texte */
text-decoration: none;
border-bottom: 0x solid #dc4747;
padding: 20px 0;
margin: 0 20px;
}
.trait2:hover {
border-bottom: 2px solid #dc4747;/* Epaisseur du trait, couleur */
padding: 6px 0; /* Marge entre le trait et le texte */
}


Code HTML à insérer dans votre éditeur HTML :

<a class="trait2" href="VOTRE LIEN">VOTRE TEXTE</a>

 

Code CSS à insérer dans la partie CSS de votre site dans Configuration - Apparence

/* Fade */
.hvr-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
padding: 8px;/*--Marge du bouton*/
border:0px solid grey;
background: #dc4747;/*--Couleur de fond*/
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
background-color: #303030;/*--Couleur de fond au survol de la souris*/
color: white;
}

Code HTML à insérer dans votre éditeur HTML :

<a href="VOTRE LIEN" class="hvr-fade">VOTRE TEXTE</a>

 

 

 

hvr-hollow

Code CSS à insérer dans la partie CSS de votre site dans Configuration - Apparence

/* Hollow */
.hvr-hollow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px #303030;/* Ombre portée */
padding: 8px;/* Marges intérieure du bouton */
background: #ededed;/* Couleur de fond */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: background;
transition-property: background;
box-shadow: inset 0 0 0 1px #303030, 5 0 1px #303030;
/* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active {
background: none;
}

Code HTML à insérer dans votre éditeur HTML :

<a href="VOTRE LIEN" class="hvr-hollow">VOTRE TEXTE</a>

 

 

 

hvr-shrink

Code CSS à insérer dans la partie CSS de votre site dans Configuration - Apparence

/* Shrink */
.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
background: #303030;/* Couleur de fond */
padding: 8px;/* Marges intérieures */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

Code HTML à insérer dans votre éditeur HTML :

<a href="VOTRE LIEN" class="hvr-shrink">VOTRE TEXTE</a>

 

Code CSS à insérer dans la partie CSS de votre site dans Configuration - Apparence

/*--hvr-sweep-to-right--*/
/*-------------------- */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
padding: 8px;/*--Marge du bouton*/
border:0px solid grey; /*-Bordures, couleur- */
background: #303030;/*--Couleur de fond*/
font-size:16px;/*-Taille du texte- */
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #dc4747;/*--Couleur chargement*/
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: ;/*--Couleur texte lien survol */
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

Code HTML à insérer dans votre éditeur HTML :

<a href="VOTRE LIEN" class="hvr-sweep-to-right">VOTRE TEXTE</a>

 

 Je vous ai mis des notes dans les codes CSS afin de personnaliser vos boutons.

Les explications sont entre les balises /*-Explication-*/

Vous pourrez modifier les couleurs, les marges etc...

Retour   Accueil   

Ajouter un commentaire