Power switch

1495 AmirAliAkrami

Open In Editor Video Publish Your Code

Power switch

Recommended

8 February 2025

Dark Mode Switch CSS

5 November 2025

HTML Toggle Switch Code Snippet

24 July 2025

CSS Toggle Switch HTML Code

HTML

CSS

body {background-color: black;}

.box {
   border: 1px solid black;
   width: 800px;
   border-radius: 20px;
   height: 400px;
   
   margin: 100px auto;
   background-color: #f4f4f0;
}

.triangle {   box-shadow: 50px 120px 10px 5px #77787b33;
   width: 50px;
   height: 50px;
   background-color: #656562;
   margin: auto;
 border-bottom: 12px groove #77787b33;
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;

}

#sim {box-shadow: 50px 120px 10px 5px #77787b33;
   background-color: black;
   width: 1px;
   height: 30px;
   margin: auto;
}

button { 
   background-color: rgb(213, 242, 213);
   width: 40px;
   height: 60px;
margin-top: 10px;
display:block;
   margin-left: 20px;
   border: none;
}

#btn {
   background-color: #8da165;
   width: 10px;
   height: 20px;
 transition: all 0.3s;
 border-top: 5px solid rgb(103, 97, 97);  
   margin-top: 1%;
margin-left:7.2px;

}

.text {

width: 200px;
   height: 50px;
   padding: 15px;
   margin-left: 37%;
   font-size: 35px;
   font-family: cursive;
   color: #eaece6;
   animation: GreenCode 1s linear infinite;
}

@keyframes GreenCode {
   0% {
      opacity: 0;
   }

50% {
      opacity: .5;
   }

100% {
      opacity: 1;
   }
}

.active {
   box-shadow: 0 150px 100px 95px #e8d724b3;
}

JS