Toggle Button

Home / Web Code Snippet / Toggle Button

Toggle Button

https://youtube.com/shorts/bEKwTgmhG08?si=NJ3szrd9xfCtOO59

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
    <div class="switch">
        <i class="fa-brands fa-bluetooth"></i><span>Bluetooth</span>
    </div>
    <div class="toggle">
        <input type="checkbox" id="bluetooth">
        <label for="bluetooth"></label>
    </div>
</div>
</body>
</html>

CSS CODE:-

body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
           
        }
        .container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            padding: 10px 30px;
            border-radius: 20px;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px,inset rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

        }
        .switch{
            font-size: 20px;
            padding:0 20px 0 10px;
        }
        .switch i{
            margin-right: 5px;
        }
        .toggle{
            height: 40px;
        }
        .toggle input[type="checkbox"]{
            position: absolute;
            opacity: 0;
        }
        .toggle input[type="checkbox"]+label{
            position: relative;
            display: inline-block;
            width: 100px;
            height: 40px;
            border-radius: 20px;
            cursor: pointer;
            box-shadow: inset rgba(100, 100, 111, 0.2) 0px 7px 29px 0px,inset rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

        }
        .toggle input[type="checkbox"]+label::before{
            content: "OFF";
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            height: 35px;
            width: 50px;
            line-height: 35px;
            border-radius: 20px;
            box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;
            transition: 0.5s ease-in-out;
        }
        .toggle input[type="checkbox"]:checked+label::before{
            content: "ON";
            left: 50%;
            color: white;
            background:#02a62d;
            box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }