Comment créer un effet flip box pour un bouton (CTA)
Pourquoi personnaliser votre site web ?
Vous vous demandez pourquoi personnaliser votre site web est si important ? Et bien, laissez-moi vous le dire : C’est un peu comme avoir une tenue vestimentaire unique et personnalisée. Si votre site n’est pas personnalisé, il risque de ressembler à une tenue générique, sans originalité et sans style. Et qui voudrait porter une tenue comme ça ?
Mais si votre site est personnalisé, c’est tout le contraire ! Vous serez comme une tenue unique, qui reflète votre personnalité et votre identité. Vous serez remarqué par tous pour votre créativité et votre originalité, et vous serez fière de votre site, qui vous ressemble.
Mais pourquoi est-ce si important de personnaliser votre site web ?
Tout simplement parce que cela vous permet de vous démarquer de la concurrence et de montrer votre personnalité. Vos visiteurs apprécieront de découvrir un site qui reflète votre entreprise et qui sort de l’ordinaire. Et vous pourrez mieux vous connecter avec eux, en leur offrant une expérience unique et personnalisée.
En résumé, personnaliser votre site web est essentiel pour vous démarquer de la concurrence et offrir une expérience utilisateur unique et personnalisée à vos visiteurs. Alors, n’attendez plus et laissez votre créativité s’exprimer ! Vous serez la personne la plus stylée de la soirée, je vous le garantis.
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.
Ci-dessous l’effet que vous aurez en suivant ce tuto.
