Effet de couleurs coulissantes sur un bouton – CSS

Mai 14, 2018 | CSS | 0 commentaire

Sliding colors button
Effet de couleurs coulissantes sur un bouton

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.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *