« Offre spéciale BLACK FRIDAY »  -50% sur FULL TEMPLATES  Du 01/11 au 30/11/22

Comment créer un effet flip box pour un bouton (CTA)

Bouton CTA avec un effet flip box

Pourquoi personnaliser votre site web ?

Saviez-vous qu’il existe environ 2 milliards de sites Web dans le monde ? On s’attend à ce que le nombre augmente à un rythme rapide à partir d’ici.

Bien que cela soit monumental à considérer, cela signifie également que la concurrence est plus serrée pour les entreprises en ligne.

Plus votre site Web est personnalisé, plus vous semblez professionnel à votre public. Les créateurs de sites Web ne vous donneront pas l’individualité dont vous avez besoin.

Chaque entreprise devrait avoir quelque chose qui la distingue de la concurrence, et le site Web de l’entreprise est le meilleur endroit pour commencer. En personnalisant votre site Web pour répondre aux besoins des clients, vous vous démarquerez de la concurrence.

Le tuto en vidéo

Tutoriel écrit

Ouvrir un module texte, aller sur le deuxième onglet « texte » et copier le code HTML

Code HTML

<a href=« https://monsite.com/ » class= »btn2″>

<span class= »text »>Text</span>

<span class= »flip-front »>Recto</span>

<span class= »flip-back »>Verso</span>

</a>

Remplacer https://monsite.com par l’URL de redirection souhaité.

Remplacer Recto par le mot de votre choix

Remplacer Verso par un autre mot de votre choix

Sur votre Dashboard, cliquer sur « Divi », puis « Option de thème »

Copier le code CSS dans « personnaliser CSS » en bas de page

Code CSS

.btn2 a {

  text-decoration: none;

  display: inline-block;

}

.btn2 {

  height: 50px;

  line-height: 50px;

  text-align: center;

  position: relative;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  -webkit-transition: all .3s ease-out;

  -o-transition: all .3s ease-out;

  transition: all .3s ease-out;

}

.text {

  padding: 0 50px;

  visibility: hidden;

}

.flip-front, 

.flip-back {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    -webkit-transform-style: flat;

    transform-style: flat;

    -webkit-transition: -webkit-transform .3s ease-out;

    -o-transition: -o-transform .3s ease-out;

    transition: transform .3s ease-out;

}

.flip-front {

    color: #000;

    border: 2px solid #000;

    background-color: transparent;

    -webkit-transform: rotateX(0deg) translateZ(25px);

    -ms-transform: rotateX(0deg) translateZ(25px);

    -o-transform: rotateX(0deg) translateZ(25px);

    transform: rotateX(0deg) translateZ(25px);

}

.flip-back {

  color: #FFF;

  background-color: #000;

  border: 2px solid #000;

  -webkit-transform: rotateX(90deg) translateZ(25px);

  -ms-transform: rotateX(90deg) translateZ(25px);

  -o-transform: rotateX(90deg) translateZ(25px);

  transform: rotateX(90deg) translateZ(25px);

}

.btn2:hover .flip-front {

    -webkit-transform: rotateX(-90deg) translateZ(25px);

    -ms-transform: rotateX(-90deg) translateZ(25px);

    -o-transform: rotateX(-90deg) translateZ(25px);

    transform: rotateX(-90deg) translateZ(25px);

}

.btn2:hover .flip-back {

    -webkit-transform: rotateX(0deg) translateZ(25px);

    -ms-transform: rotateX(0deg) translateZ(25px);

    -o-transform: rotateX(0deg) translateZ(25px);

    transform: rotateX(0deg) translateZ(25px);

}

Vous pouvez changer toutes les couleurs : texte, bordure et fond. Il suffit d’aller dans le code CSS et remplacer les code hexadécimal par les vôtres.

Tableau représentant les couleurs marketing avec des marques connus

Ci-dessous l’effet que vous aurez en suivant ce tuto.

Un bouton Call To Action avec écrit "shop now"
Olivier Dufour

Olivier Dufour

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *