ANIMEZ LES BOUTONS DE VOS SITES AVEC PARTICLE EFFECT BUTTONS

21/03/2019
Par Charles Arramon

Particle Effect, c’est quoi ?

Particle Effect est une librairie Javascript qui dépend d’anime.js (une bibliothèque qui, comme son nom l’indique, est spécialisée dans l'animation des éléments d'une page web ). Elle propose d’animer, en quelques lignes de code, les boutons cliquables de votre site internet pour un rendu franchement esthétique. 

Les étapes à suivre

Pour pouvoir utiliser ce plugin, commencez par télécharger et inclure les feuilles de style particles.css et base.css dans le header votre fichier HTML.

Ensuite, vous devez récupérer les scripts anime.min.js, particles.js et demo.js et les inclure en bas de page.

Une fois ces deux étapes effectuées, copiez-collez le bout de code ci-dessous dans votre page HTML, au sein du body de votre document HTML.

<svg class="hidden">
    <symbol id="icon-arrow" viewBox="0 0 24 24">
	<title>arrow</title>
	<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
    </symbol>
    <symbol id="icon-drop" viewBox="0 0 24 24">
	<title>drop</title>
	<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
    </symbol>
    <svg id="icon-github" viewBox="0 0 33 33">
	<title>github</title>
	<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
    </svg>
    <svg id="icon-rewind" viewBox="0 0 36 20">
	<title>rewind</title>
	<path d="M16.315.061c.543 0 .984.44.984.984v17.217c0 .543-.44.983-.984.983L.328 10.391s-.738-.738 0-1.476C1.066 8.178 16.315.061 16.315.061zM35.006.061c.543 0 .984.44.984.984v17.217c0 .543-.44.984-.984.984L19.019 10.39s-.738-.738 0-1.475C19.757 8.178 35.006.06 35.006.06z"/>
    </svg>
</svg>
<div class="grid">
    <div class="grid__item theme-1">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Send</button>
    </div>
    <div class="grid__item theme-2">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Upload</button>
    </div>
    <div class="grid__item theme-3">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Delete</button>
    </div>
    <div class="grid__item theme-4">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Submit</button>
    </div>
    <div class="grid__item theme-5">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">refresh</button>
    </div>
    <div class="grid__item theme-6">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Bookmark</button>
    </div>
    <div class="grid__item theme-7">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Subscribe</button>
    </div>
    <div class="grid__item theme-8">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Logout</button>
    </div>
    <div class="grid__item theme-9">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Add to cart</button>
    </div>
    <div class="grid__item theme-10">
        <button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Pause</button>
    </div>
    <div class="grid__item theme-11">
	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
	<button class="particles-button">Register</button>
    </div>
    <div class="grid__item theme-12">
    	<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
    	<button class="particles-button">Export</button>
    </div>
</div>		

Le premier fragment de code, ci-dessous permet d'affichage le bouton pour faire réapparaître le bouton une fois qu'il aura disparu. Selon l'utilisation que vous ferez de cette librairie (appel Ajax, simple lien, validation de formulaire), il peut ne pas être pertinent de l'ajouter.

<svg class="hidden">
    <symbol id="icon-arrow" viewBox="0 0 24 24">
	<title>arrow</title>
	<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
    </symbol>
    <symbol id="icon-drop" viewBox="0 0 24 24">
	<title>drop</title>
	<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
    </symbol>
    <svg id="icon-github" viewBox="0 0 33 33">
	<title>github</title>
	<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
    </svg>
    <svg id="icon-rewind" viewBox="0 0 36 20">
	<title>rewind</title>
	<path d="M16.315.061c.543 0 .984.44.984.984v17.217c0 .543-.44.983-.984.983L.328 10.391s-.738-.738 0-1.476C1.066 8.178 16.315.061 16.315.061zM35.006.061c.543 0 .984.44.984.984v17.217c0 .543-.44.984-.984.984L19.019 10.39s-.738-.738 0-1.475C19.757 8.178 35.006.06 35.006.06z"/>
    </svg>
</svg>

Le reste n'est rien d'autre que l'affichage des différents boutons selon des animations possibles.

Amusez-vous !

Maintenant que vous disposez de cette base, vous êtes libres de changer la hauteur, largeur ou couleur de vos boutons. Et pour en savoir plus sur cette librairie et ses options, rendez-vous ici !

Charles Arramon
Charles Arramon

Passionné d'informatique, Charles a fondé Redbox en 2013 avec Arnaud après six ans passés dans une agence locale. Analyste développeur soucieux du travail bien fait, il conçoit des applications web et sites internet depuis...

Les articles de la même catégorie
Ophélie et Raphaël rejoignent Redbox

L'équipe de Redbox Communication est heureuse de vous annoncer l'arrivée de deux nouveaux membres. Depuis maintenant plusieurs...

IcoMoon, l'outil pour créer des polices d'icônes à partir de SVG

Dans un souci de personnalisation des sites internet que nous développons, nous avons été amenés à chercher un outil permettant...

Aujourd’hui est la journée mondiale de la protection des données

Depuis 2007 se déroule, chaque 28 janvier, la journée mondiale de la protection des données. A l’initiative du Conseil de...