Sommaire

La bibliothèque Micron

1. Les objectifs

Cette très légère bibliothèque va permettre de dynamiser les boutons avec de petites animations. Voici son URL sur GitHub : https://github.com/webkul/micron

images/C06-026.png

Sa documentation est aussi sur GitHub : https://webkul.github.io/micron/docs.html

2. L’installation de la bibliothèque

Pour installer cette bibliothèque, vous devez lier son fichier .js et son fichier .css à un CDN, dans l’élément <head> de vos fichiers .html :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
        <link 
href="https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css" 
type="text/css" rel="stylesheet"> 
        <script 
src="https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js" 
type="text/javascript"></script> 
    </head> 
    <body> 
        ... 
    </body> 
</html>

3. Insérer un bouton animé

Nous allons insérer un bouton avec l’élément <button> et avec la classe .boutons pour sa simple mise en forme :

<button class="boutons">Mon bouton</button>

Voici la classe .boutons :

<style> 
    .boutons ...