Bouton glissant

Voici une animation pour vos boutons :

D’abord construire les éléments dans Bricks. Une div qui servira d’enveloppe au bouton avec la classe .btn-slide-ctn. Puis à l’intérieur une div qui sera la partie ici jaune et qui se transforme avec la classe .btn-slide et enfin un champs texte et une icône.

Un élément code sera nécessaire et il y faudra mettre le CSS et le JS suivant (le JS servant à effectuer le retour de la transformation.

.reverse .btn-slide{
	animation:back 1s ease-in-out backwards;
}  
.btn-slide-ctn:hover .btn-slide{
	animation:animate 1s ease-in-out forwards;
}  
@keyframes animate {
	0% {
		left:0;
		right:auto;	
	}
	50% {
		width: 220px;
	}
	100% {
		right: 0;
		left:auto;
	}
}
@keyframes back {
	0% {
		right: 0;
		left:auto;	
	}
	50% {
		width: 220px;
	}
	100% {
		right:auto;
		left:0;
	}	
}

document.addEventListener("DOMContentLoaded", function (event) {
  
const sends = document.querySelectorAll(".btn-slide-ctn");

sends.forEach((send) => {send.addEventListener("mouseout", () => send.classList.add("reverse"));
});
});