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

avatar de baptiste pagès
Par Baptiste Pagès le 8 juillet 2022

Publié dans Webdesign

Mis à jour le 8 juillet 2022

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);
}
Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
Générateur de schema.org local business
0