Power On Off Neumorphism Button Using HTML And CSS Only | Coding With Roannie

Source Code :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>

        body{

            margin: 0;

            padding: 0;

            background-color: #ececec;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        input[type="checkbox"]{

            -webkit-appearance: none;

            width: 250px;

            height: 250px;

            border-radius: 50%;

            box-shadow: 

            -10px -10px 15px  rgba(255, 255, 255, 0.5),

            10px 10px 15px  rgba(70, 70, 70, 0.12); 

            top: 50%;

            left: 50%;

            position: absolute;

            transform: translate(-50%,-50%);

            border: 8px solid #ececec;

            outline: none;

            cursor: pointer;

        }

        

        input[type="checkbox"]::after{

            font-family: FontAwesome;

            content: '\f011';

            font-size: 70px;

            position: absolute;

            top: 37.5%;

            left: 39%;

            color: rgb(221, 25, 25);

            text-shadow: 1px 1px 10px  rgb(221, 25, 25);

        }

        input[type="checkbox"]:checked{

            

            box-shadow:-10px -10px 15px  rgba(255, 255, 255, 0.5),

                        10px 10px 15px  rgba(70, 70, 70, 0.12),

                        inset -10px -10px 15px  rgba(255, 255, 255, 0.5),

                        inset  10px 10px 15px  rgba(70, 70, 70, 0.12); 

                                        

             

        }

        input[type="checkbox"]:checked:after{

            color: rgb(37, 202, 78);

            text-shadow: 1px 1px 10px  rgb(37, 202, 78);

        }

    </style>

</head>

<body> 

    <div>

    <input class="checkbox" type="checkbox" >

    

</div>

<script>

    let checkbox = document.getElementsByClassName("checkbox");

     if(checkbox){

         checkbox.innerHTML = "<h1> Power On </h1>"

     }

     else{

     }

</script>

</body>

</html>

Subscribe On YouTube

Thanks For Visiting