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.

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22https%3A%2F%2Fchezmarko.fr%22%20target%3D%22_blank%22%20class%3D%22monBoutton%22%3EGO%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »markup » manual= »%3Cstyle%3E%0A.monBoutton%20%7B%0A%20%20%20%20background-color%3A%20%23007BFF%3B%0A%20%20%20%20Color%3Awhite%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20padding%3A%2010px%2040px%3B%0A%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20cursor%3A%20pointer%3B%20%0A%20%20%20%20box-shadow%3A%200%208px%2016px%200%20grey%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Ca%20href%3D%22https%3A%2F%2Fchezmarko.fr%22%20target%3D%22_blank%22%20class%3D%22monBoutton%22%3EGO%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

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 :

[pastacode lang= »markup » manual= »%3Cstyle%3E%0A%20%20.monBoutton%20%7B%0A%20%20%20%20background-color%3A%20%23007BFF%3B%0A%20%20%20%20Color%3Awhite%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20padding%3A%2010px%2040px%3B%0A%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20cursor%3A%20pointer%3B%20%0A%20%20%20%20box-shadow%3A%200%208px%2016px%200%20grey%3B%0A%20%20%20%20text-decoration%3A%20none%3B%20%20%20%0A%20%20%7D%0A%0A%20%20.monBoutton%3Ahover%20%7B%0A%20%20%20%20background-color%3A%20%23DC3545%3B%0A%20%20%7D%0A%0A%3C%2Fstyle%3E%0A%0A%0A%3Ca%20href%3D%22https%3A%2F%2Fchezmarko.fr%22%20target%3D%22_blank%22%20class%3D%22monBoutton%22%3EGO%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

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 ?

[pastacode lang= »markup » manual= »%3Cstyle%3E%0A%20%20.monBoutton%20%7B%0A%20%20%20%20background-color%3A%20%23007BFF%3B%0A%20%20%20%20Color%3Awhite%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20padding%3A%2010px%2040px%3B%0A%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20cursor%3A%20pointer%3B%20%0A%20%20%20%20box-shadow%3A%200%208px%2016px%200%20grey%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20transition%3A%20background-color%201s%3B%0A%20%20%20%0A%20%20%7D%0A%0A%20%20.monBoutton%3Ahover%20%7B%0A%20%20%20%20background-color%3A%20%23DC3545%3B%0A%20%20%7D%0A%0A%3C%2Fstyle%3E%0A%3Ca%20href%3D%22https%3A%2F%2Fchezmarko.fr%22%20target%3D%22_blank%22%20class%3D%22monBoutton%22%3EGO%3C%2Fa%3E » message= » » highlight= » » provider= »manual »/]

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é.

Mise à jour  : Finalement, j’ai décidé d’ouvrir un nouveau blog où je parle de mon métier de développeur fulls-stack. N’hésitez pas à l’ajouter à vos favoris.

3 Commentaires

  1. Merci beaucoup pour cet article ! 🙂 étant complètement débutante, cela m’a été très utile !
    J’aurais cependant une question, je souhaite centrer le bouton dans mon article mais je ne trouve pas comment faire. J’ai vu qu’il faudrait ajouter ceci
    {
    margin : 0 auto;
    }
    mais je ne sais pas ou et après plusieurs essais, je me tourne vers vous 🙂
    Avez vous un conseil à me donner svp ? 🙂

    • Hello

      Merci bcp pour ton commentaire.
      Pour centrer le bouton, tu peux effectivement utiliser margin : 0 auto.
      Il faut l’appliquer au bouton, mais pour que ça fonctione, ton bouton doit avoir une largeur de définie avec width

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici