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