Notez que cet article a été écrit il y a plus de 2 ans, mais il n'est pas forcément obsolète.
On cherche à obtenir un effet de couleurs coulissantes sur un bouton en CSS3. On utilise les pseudo-éléments ::before et ::after pour les fonds de couleurs en position absolute et une transition sur la propriété left de ces éléments.
Pour obtenir cet effet, on crée le bouton avec une classe que l’on va styliser dans un fichier css :
|
1 |
<button class="clio_button">Mon Bouton</button> |
Et l’on écrit dans le style :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* Button */ .clio_button { text-decoration: none; color: #FFFFFF !important; position: relative; text-transform: initial !important; font-size: 1.2em !important; font-weight: 500 !important; z-index: 0; overflow: hidden !important; letter-spacing: 1.2px; transition: transform 0s !important; font-family: proximaNova, sans-serif !important; } .clio_button:hover { color: #FFFFFF; } .clio_button::before, .clio_button::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; transition: left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .clio_button::before { background-color: #294C6B; z-index: -1; left: 0; } .clio_button::after { background-color: #00B17D; z-index: -1; left: 100%; } .clio_button:hover::before { left: -100%; } .clio_button:hover::after { left: 0; } .clio_button [class^="clio-"]::before { vertical-align: text-bottom; } .clio_button:active { transform: translateY(-2px); } |
Et hop, un joli bouton avec un effet de couleurs coulissantes au survol.
