Steve TENZA
Intervient pour votre site internet
<a class="btn_animation" href="votre_page.html">Survolez-moi !</a>
.btn_animation {
padding:10px 20px;
border-radius:40px;
position:relative;
background: red;
display: inline-block;
overflow: hidden;/*permet que l'effet ne sorte pas de .btn_animation*/
cursor:pointer;
}
.btn_content {
position:relative;
z-index:1;/*positionne le texte en dessus de l'effet*/
}
.btn_effect {
position:absolute;
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
z-index:0;/*positionne l'effet en dessous du texte*/
}
.btn_animation:hover > .btn_effect {
animation:btn_effect 0.9s linear forwards;/*forwards permet de terminer l'effet sur la dernière commande : background:transparent;*/
}
@keyframes btn_effect {
0% {
transform:scale(0);
background:white;
}
100% {
transform:scale(10);
background:transparent;
}
}//parcours tous les boutons qui ont la classe .btn_animation
//pour capturer les événement de la souris ("survolage" (mouseenter) et "quitte la zone" (mouseleave))
var btns_animation = document.querySelectorAll(".btn_animation");
btns_animation.forEach((btn)=>{
//la souris survole un bouton, l'événement mouseenter est déclenché
//(e) contient notre événement
//e.layerX et e.layerY est la position de notre souris, le départ de notre effet
btn.addEventListener("mouseenter", (e)=>{
//positionne le texte du bouton dans un span .btn_content pour qu'on puisse le mettre au dessus de l'effet
//si le texte n'est pas déjà dans le span .btn_animation, on l'ajoute
if(btn.getElementsByClassName("btn_content").length == 0)
btn.innerHTML = `<span class="btn_content">${btn.innerHTML}</span>`;
//place le span .btn_effect qui fait l'effet
//'afterbegin' vient positionner .btn_effect avant tout autre élément dans .btn_animation (n'a pas d'importance ici car on utilise la propriété CSS z-index pour le position en dessous du texte)
//l'utilisation de insertAdjacentHTML est plus rapide que innerHTML
btn.insertAdjacentHTML('afterbegin', `<span class="btn_effect" style="left:${e.layerX-25}px;top:${e.layerY-25}px"></span>`);
});
//la souris quitte le bouton, on supprime l'effet (le span .btn_effect)
//le fait de le supprimer relancera l'effet CSS quand on le remettra
btn.addEventListener("mouseleave", ()=>{
//supprime l'effet si le span .btn_effect existe (ou plusieurs, par une erreur quelconque)
btn.querySelectorAll(".btn_effect").forEach((elm)=>{
elm.remove();
});
});
});
J'espère que ce script gratuit vous est utile.Pour soutenir mon travail, un simple don ou mettre une note est grandement apprécié.
Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.
Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.
Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :
Demander un devis