Effet sur bouton OUI/NON (transition ? )

**Ushuango** · 12/01/2021, 22h21

Bonsoir,

j'ai commencé ( pour apprendre ) un bouton: le classique OUI/NON qui se retrouve dans les formulaires.
Je l'ai fait exclusivement en HTML/CSS ( et je compte continuer !)

Mais, je suis arrêté là:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oui/non</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bouton">
        <input type="checkbox">
        <label>
            <span class="switch">
                <span class="on">ON</span>
                <span class="mid"></span>
                <span class="off">OFF</span>
            </span>
        </label>
    </div>
</body>
</html>

associé à:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
58
 
 {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
input {
    position: absolute;
    top: -5000px;
}
 
.bouton {
    position: absolute;
    top: 50%;
    left: 40%;
 
}
 
label {
    display: block;
    cursor: pointer;
    border: 2px solid tomato;
}
 
.switch {
    border: 2px solid black;
    border-radius: 15px;
    display: flex;
    width: 130px;
    height: 35px;
    overflow: hidden;
}
 
.on, .off {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
}
 
.mid {
    display: flex;
    width: 50px;
    border: 2px solid blue;
    border-radius: 20px;
}
 
.on {
    width: 100%;
    background-color: rgb(10, 204, 10);
}
 
.off {
    width: 100%;
    background-color: rgb(255, 0, 55);
}

Je peux mettre un widht: 100% sur le .on et un width: 0% sur le .off , du coup j'aurai l'apparence ( un oui se foud vert avec un cercle blanc un peu carré à droite )
Mais après?
Plusieurs questions:
- comment avoir un vrai cercle blanc ?
- quelle transition faire pour passer au non avec un click ( le pseudo-selecteur : checked ) et une transition ?
- la plus importante : est-ce la meilleure façon de faire un bouton de ce genre ? ( si non, autant ne pas continuer...et essayer autre chose)

Voilà, je vais me coucher avec tout ça en tête en espérant que tout sera plus claire demain !

Laurent.

**NoSmoking** · 14/01/2021, 11h14

Bonjour,

- comment avoir un vrai cercle blanc ?

il faut que l'élément soit carré, donc même height que width, avec un border-radius:50%.

- quelle transition faire pour passer au non avec un click ( le pseudo-selecteur : checked ) et une transition ?

Il existe une multitude façon de procéder pour obtenir le résultat avec des structures plus ou moins alambiquées mais la solution de l'utilisation des pseudo-éléments, :before et/ou :after fait l'unanimité.
La modification intervient en ajoutant effectivement un sélecteur avec :checked.

Exemple :
Structure HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p class="exemple">
  <input type="checkbox" id="exemple-checkbox">
  <label for="exemple-checkbox"></label>
</p>

CSS pour le <label> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.exemple label {
  display: inline-block;
  position: relative;
  width: 3em;
  height: 1em;
  border-radius: 1em;
  background: #EEE;
  cursor: pointer;
}

... il y a pas mal de cosmétique !

CSS pour le pseudo-élément :before :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.exemple label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  color: #CCC;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #999;
  border-radius: 50%;
  background: radial-gradient(circle at top left, #FFF 10%, currentColor 50%, #000);  
  transition: all .3s;
  transform: translate(0, -50%);
}

... idem, il y a pas mal de cosmétique, et l'on ajout la déclaration de transition.

Pour finir la prise en compte des modifications au click sur l'<input> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#exemple-checkbox:checked + label:before {
  left: 100%;
  color: #0C0;
  transform: translate(-100%, -50%);
}

Tu devrais réussir à y voir plus clair sachant que tu peux à peu près tout faire le tout étant de savoir quel rendu tu souhaites au final, le HTML pouvant dans ce cas être différent.

- la plus importante : est-ce la meilleure façon de faire un bouton de ce genre ? ( si non, autant ne pas continuer...et essayer autre chose)

Si c'est un état binaire que tu veux représenter, pourquoi pas, c'est du « IOS like », c'est pas toujours intuitif mais bon il y a tellement de façons de faire !

**Ushuango** · 14/01/2021, 14h54

Bonjour,

j'ai trouvé depuis, après des recherches et tâtonnements !!!
Pour ce qui est du "rond carré" , je voulais dire par là qu'il y avait un cercle dans un carré ! et je ne voulais qu'un cercle.
Il fallait seulement des marges droites et gauches négatives qui faisaient la largeur du cercle. Puis des z-index pour mettre ce cercle par-dessus les fonds de ON / OFF
voilà ce que j'ai fait:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>boutons en span</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bouton">
        <input type="checkbox" id="checkbox">
        <label for="checkbox">
            <span class="on">ON</span>
            <span class="circle"></span>
            <span class="off">OFF</span>
        </label>
    </div>
</body>
</html>

et le css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
 
.bouton {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 115px;
    height: 30px;
    overflow: hidden;
    border-radius: 15px;
}
 
input {
    position: absolute;
    top: -50000px;
}
 
label {
    cursor: pointer;
    display: block;
    width: 200px;
    height: 30px;
    margin-left: -84px;
    transition: margin-left 0.7s;
}
 
.on, .off {
    position: relative;
    z-index: 1;
    display: block;
    float: left;
    text-align: center;
    line-height: 30px;
    color : white;
    width: 50%;
}
 
.on {
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    background-color: green;
}
 
.off {
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    background-color: red;
}
 
.circle {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 3px solid black;
    margin-left: -15px;
    margin-right: -15px;
    background-color: #fff;
    position: relative;
    z-index: 2;
}
 
input:checked + label {
    margin-left: 0px;
}

Sinon, j'ai aussi essayé la méthode avec les :after et :before

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oui/non</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="bouton">
        <input type="checkbox" id="input_switch">
        <label for="input_switch" class="switch">
            <span class="on_off"></span>
            <span class="circle"></span>
        </label>
    </div>
</body>
</html>

avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background-color: rgb(85, 100, 82);
}
 
input {
    position: absolute;
    top: -5000px;
}
 
.bouton {
    position: absolute;
    top: 50%;
    left: 40%;
    border: 2px solid black;
    width: 100px;
    height: 35px;
    border-radius: 15px;
    overflow: hidden;
 
}
 
label {
    display: block;
    cursor: pointer;
    height: 100%;
    border-radius: 15px;
}
 
.on_off {
    display: block;
    height: 100%;
    width: 200%;
    border-radius: 15px;
    margin-left: -100%;
    transition: margin-left 0.7s;
}
 
.on_off::before, .on_off::after {
    display: block;
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 32px;
    position: relative;
    z-index: 1;
}
 
.on_off::before {
    content: "ON";
    background-color: green;
}
 
.on_off::after {
    content: "OFF";
    background-color: orange;
}
 
.circle {
    display: block;
    position: absolute;
    top: 0px;
    right: 70%;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    border: 2px solid red;
    z-index: 2;
    transition: all 0.7s;
}
 
input:checked + label .on_off {
    margin-left: 0px;
}
 
input:checked + label .circle {
    right: 0px;
}

Je trouve celle-ci plus lisible et plus facile à faire.
En restant sur le même code et en changeant seulement u peu les styles , on peut concevoir un gros "rond" qui masque le on (ou off ) lors du click.
Un seul élément qui bouge!

Mais comme je ne connaissais pas en core le

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
background: radial-gradient

Je vais aller voir ça de plus près: on doit pouvoir faire encore moins de code !

Pour ce qui est des "cosmétiques"

, je n'en mets pas trop, car pour l'instant je cherche à comprendre la technique !
Mais il faudra bien par la suite faire quelque chose de beau et propre. Mais je ne suis pas vraiment artiste.
Dans ce domaine, je suis comme l'écrivain devant une page blanche: je n'ai aucune idée de l'effet que pourra avoir la page en fonction du style choisi !.
y a-t-il un moyen de s'entraîner à ça? En dehors de regarder d'autres sites pour exercer sont oeil.
Il me faudrait en tête des ensembles de bonnes couleurs et de polices !

**Ushuango** · 14/01/2021, 17h03

Je m'aperçois d'un truc bizarre dans ton code:

tu définis une largeur et une hauteur pour le pseudo-élément :before
Mais sans avoir de display: inline-block ou block !!!!!
Et ça marche

Alors que moi, si j'essaye sans le display: inline-block, mon cercle n'apparaît pas ( pas de largeur, ni de hauteur ).
Il y a un truc qui m'échappe!

**NoSmoking** · 15/01/2021, 18h33

Pour dire un mot sur ta représentation et indépendamment du look final ce qui me gène dans cette représentation est que l'on doit cliquer sur OFF pour mettre en ON, même si je te l'accorde cette façon de faire est rentré dans les mœurs.

Une chose également à laquelle je m'attache, dans la mesure du possible, est qu'en absence de CSS la lecture écran reste cohérente.

Nul doute qu’en tapant sur ton moteur de recherche préféré « CSS Toggle switch » tu n'auras que l'embarras du choix.

Je trouve celle-ci plus lisible et plus facile à faire.

Chacun a son ressenti, c'est comme les goûts et les couleurs

y a-t-il un moyen de s'entraîner à ça? En dehors de regarder d'autres sites pour exercer sont oeil.

Quand tu fais pour du perso, regarde si trois mois après cela te plaît toujours et tiens compte des éventuelles remarques que l'on pourrait te faire.

Il me faudrait en tête des ensembles de bonnes couleurs et de polices !

Il existe pas mal de sites qui traitent des palettes des couleurs, choix/harmonisation des fonts et leur associations.

Je m'aperçois d'un truc bizarre dans ton code:

tu définis une largeur et une hauteur pour le pseudo-élément :before
Mais sans avoir de display: inline-block ou block !!!!!

C'est simplement que l'élément est en position:absolute ce qui lui confère un rendu en display:block donc dimensionnable.

**Ushuango** · 18/01/2021, 12h02

Bonjour,

C'est simplement que l'élément est en position:absolute ce qui lui confère un rendu en display:block donc dimensionnable.

Je n'avais jamais lu ça avant , mais effectivement , ça fonctionne comme tu l'indiques !
L'endroit où on trouve se genre de "petit détail"

? Je suis souvent sur MDN et ce n'est pas aussi détaillé sur le sujet !

Pour le ON/OFF, pour moi, ce que je vois est l'état du bouton ...
On peux bien sûr ne faire qu'un bouton sans texte avec seulement une couleur qui change, plus clair pour tout le monde !
Mais dans ce cas, il faudra un texte à côté du bouton. Et ce texte , un label aussi ? ça reste valide en html, mais peut-on mettre le même for comme attribut ? deux labels pour un input ?

Une chose également à laquelle je m'attache, dans la mesure du possible, est qu'en absence de CSS la lecture écran reste cohérente.

Tu veux dire par là, que sans css il faut quand même savoir qu'il y a un bouton switch et à quoi il sert ? (sans css le ON/OFF n'apparaît pas)
Ce qui renvoie à ma question des deux labels ...si on parle bien de lecteurs d'écrans !

Effet sur bouton OUI/NON (transition ? )

CSS

Vue hybride

Discussions similaires

Partager

Partager