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,
Table of Content
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..!
Was this article helpful?
YesNo