Power switch on off using CSS and HTML PHPCODER.TECH

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


<!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>

<!DOCTYPE html>

<html>

<head>

<title>Switch</title>

</head>

<body>

<label>

Off

On

</label>

</body>

</html>

Here is the main part of the design which is a CSS file.

switch.css


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);
}

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

Power switch on off using CSS and HTML

Switch.html

switch.css

Related

Written by Bikash

JavaScript if else Statement: Detailed Article

How to use comments in HTML With Example

Bootstrap Datepicker- Complete Solution to Integrate

Leave a Reply Cancel reply