J’en ai déjà vaguement parlé sur Twitter pour ceux qui me suivent, mais ça fait maintenant un petit bout de temps que j’avais envie d’ouvrir une section “programmation” sur le blog. Au boulot je passe mes journées à coder (entre autres) et je me rends compte que j’en parle au final très peu, pour ne pas dire même jamais.

Du coup, je décide enfin de me lancer et je vous propose aujourd’hui quelque chose de vraiment très simple pour commencer : Comment changer la couleur d’un bouton avec un petit effet de transition en CSS.

1. Créer le bouton

Commençons par le commencement en créant un bouton en HTML. Bon, il ne s’agit pas d’un bouton à proprement parler avec la balise <button></button>, mais d’un simple lien qu’on va ensuite mettre en forme avec du CSS.

<a href="https://chezmarko.fr" target="_blank" class="monBoutton">GO</a>

Résultat :

GO

2. La mise en forme

Maintenant, mettons en forme ce lien pour qu’il ressemble à un bouton grâce à la classe “monBoutton” et quelques lignes de code dans le CSS. Sachez que le CSS peut-être directement intégré dans une page HTML à l’aide des balises <style></style>, mais il est tout de même préférable qu’il soit à part dans un fichier .css

<style>
.monBoutton {
    background-color: #007BFF;
    Color:white;
    font-weight: bold;
    padding: 10px 40px;
    border-radius: 3px;
    cursor: pointer; 
    box-shadow: 0 8px 16px 0 grey;
    text-decoration: none;
  }
</style>
<a href="https://chezmarko.fr" target="_blank" class="monBoutton">GO</a>

Résultat :

GO

 

3. Le changement de couleur

Maintenant, le but va être de changer la couleur du bouton au survol de la souris. Et pour cela, il suffit d’utiliser le sélecteur “hover” dans le CSS :

<style>
  .monBoutton {
    background-color: #007BFF;
    Color:white;
    font-weight: bold;
    padding: 10px 40px;
    border-radius: 3px;
    cursor: pointer; 
    box-shadow: 0 8px 16px 0 grey;
    text-decoration: none;   
  }

  .monBoutton:hover {
    background-color: #DC3545;
  }

</style>


<a href="https://chezmarko.fr" target="_blank" class="monBoutton">GO</a>

Résultat :

GO

 

4. L’effet de transition

Changer la couleur d’un bouton au survol, c’est bien, mais le faire avec un léger effet de transition, c’est encore mieux. Et pour y arriver, on a besoin de l’attribut transition qui indique la marche à suivre lors d’un changement d’état:

transition: background-color 1s;

Ainsi, la ligne ci-dessus, qu’on doit ajouter dans la classe “monButton“, demande au navigateur de mettre 1 seconde pour changer la couleur de fond de notre bouton. C’est quand même super simple non ?

<style>
  .monBoutton {
    background-color: #007BFF;
    Color:white;
    font-weight: bold;
    padding: 10px 40px;
    border-radius: 3px;
    cursor: pointer; 
    box-shadow: 0 8px 16px 0 grey;
    text-decoration: none;
    transition: background-color 1s;
   
  }

  .monBoutton:hover {
    background-color: #DC3545;
  }

</style>
<a href="https://chezmarko.fr" target="_blank" class="monBoutton">GO</a>

Résultat :

GO

Et voilà, vous savez maintenant comment changer la couleur d’un bouton avec un effet de transition. Un effet qu’on peut aussi appliquer à plein d’autres choses comme la dimension du bouton ou encore la taille et la police du texte. Les possibilités sont assez nombreuses.

J’ai conscience que ce premier article de “programmation” est assez maigre et simpliste, mais il s’agit surtout d’un premier jet et aussi d’un test pour moi. Je ne suis pas encore très sûr de la forme que ces billets devront prendre et je ne sais même pas si ça va vous plaire et si vous allez trouver ça utile. D’ailleurs, si jamais vous avez des questions ou des commentaires à me faire, n’hésitez surtout pas, ça me sera aussi utile qu’aux personnes qui viendront ici pour apprendre des choses.

Pour la suite, j’aimerais faire un peu de C#, du javascript, de l’Angular et encore un peu de CSS. Mais surtout, j’essaierais de faire des billets plus longs et plus chiadé.

1 commentaire

Répondre

Merci de renseigner votre commentaire
Merci de renseigner votre nom