Hello Coders, today I will show you the power button on-off design using CSS, which button you use on your everyday life. I will show you with CSS in a very simple manner which any can understand very easily.
Here is the code below,
Switch.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Switch</title> <link rel="stylesheet" type="text/css" href="switch.css"> </head> <body> <label> <input type="checkbox" name=""> <span class="check"></span> <span class="light off">Off</span> <span class="light on">On</span> </label> </body> </html> |
Here is the main part of the design which is a CSS file.
switch.css
|
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: sans-serif; background:#030303; } label{ position: relative; width: 200px; height: 200px; } label input{ opacity: 0; } .check{ position: absolute; top: 0; left: 0; cursor: pointer; width: 100%; height: 100%; background:linear-gradient(#262626,#141414); box-shadow: 0 0 0 4px #090909; border-radius:50%; transition:0.5s; } input:checked ~ .check{ transform: rotate(125deg); } .check:before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 160px; height: 160px; background: linear-gradient(#161616,#262626); border-radius: 50%; } .check:after{ content: ''; position: absolute; top:25%; left: 9%; width: 4%; height: 20%; background: #555; transform: rotate(118deg); } .light{ font-weight:bold; font-size:16px; position: absolute; text-transform: uppercase; } .light.off{ top:16px; left: -28px; color: #242424; } .light.off:before { content:''; position: absolute; top:28px; left:20px; width:4px; height:4px; border-radius:50%; background:#f00; transition: 0.5s; box-shadow: 0 0 0 2px rgba(255,0,0,.2), 0 0 5px rgba(255,0,0,1), 0 0 10px rgba(255,0,0,1), 0 0 15px rgba(255,0,0,1), 0 0 30px rgba(255,0,0,1); } input:checked ~ .light.off:before{ background:#111; box-shadow: none; } .light.on{ top:16px; right: -28px; color: #242424; } .light.on:before { content:''; position: absolute; top:28px; left:2px; width:4px; height:4px; border-radius:50%; background:#111; transition: 0.5s; box-shadow: none; } input:checked ~ .light.on:before{ background:#0f0; box-shadow: none; box-shadow: 0 0 0 2px rgba(0,255,0,.2), 0 0 5px rgba(0,255,0,1), 0 0 10px rgba(0,255,0,1), 0 0 15px rgba(0,255,0,1), 0 0 30px rgba(0,255,0,1); } |
You can create your own from copying this code and paste your favourite code editor and save you can look like this on below.
Happy Coding..!