Copiez Collez une de mes animations de boutons favorites pour Gutenberg (pur CSS)

Aujourd'hui, je partage avec vous l'une de mes animation de boutons favorites : l'effet bulle 🙂 Je transcrirais peut être la vidéo plus tard. En attendant, voici le code !

.animation-bulle > a{
	position:relative;
	z-index:2;
	overflow:hidden;
}
.animation-bulle > a:before{
	content:"";
	width:500px;
	height:500px;
	background-color:#fff;
	position:absolute;
	left:calc(50% - 250px);
	top:calc(50% - 250px);
	border-radius:50%;
	z-index:-1;
	transform:scale(0);
	transition:0.3s ease-in-out all;
}
.animation-bulle > a:hover:before{
	background-color:#000;
	transform:scale(0.5);
}