Button Style and Hover Effect With CSS

 BUTTON Style:-

Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizingborder-box;
        }
        body{
            displayflex;
            justify-content:center;
            align-items:center;
            min-height100vh;
            flex-directioncolumn;
            background:#2b2b2b;
        }
        label{
            positionrelative;
            margin5px 0;
            cursor:pointer;
        }
        label input{
            appearancenone;
            displaynone;
        }
        label span{
            positionrelative;
            display:block;
            width:80px;
            height:40px;
            background:#222;
            border-radius40px;
            box-shadow:inset 0 2px 15px rgba(0,0,0,0.2);
            box-shadow:inset 0 2px 2px rgba(0,0,0,0.2);
            box-shadow:inset 0 -1px 1px rgba(0,0,0,0.2);
        }
        label .indicator{
            positionabsolute;
            top0;
            left0;
            width40px;
            height40px;
            background:linear-gradient(to bottom#444#222);
            border-radius50%;
            box-shadow:  0 2px 5px rgba(0,0,0,0.5);
            box-shadowinset 0 1px 1px rgba(255,255,255,0.1);
            transition:0.5s;
            transformscale(0.9);
        }
        label input:checked ~ .indicator{
            left40px;
        }
        label .indicator:before{
            content'';
            positionabsolute;
            top:50%;
            left50%;
            transformtranslate(-50%-50%);
            width5px;
            height5px;
            background:#f00;
            border-radius:50%;
            box-shadow:0 0 2px #f00,;
            box-shadow:0 0 5px #f00,;
            box-shadow:0 0 10px #f00,;
            box-shadow:0 0 15px #f00,;
            box-shadow:0 0 20px #f00,;
            box-shadow:0 0 25px #f00,;
            box-shadow:0 0 30px #f00,;
            box-shadow:0 0 40px #f00,;
        }
        label input:checked ~ .indicator:before{
          background:#00f;
            border-radius:50%;
            box-shadow:0 0 2px #00f,;
            box-shadow:0 0 5px #00f,;
            box-shadow:0 0 10px #00f,;
            box-shadow:0 0 15px #00f,;
            box-shadow:0 0 20px #00f,;
            box-shadow:0 0 25px #00f,;
            box-shadow:0 0 30px #00f,;
            box-shadow:0 0 40px #00f,;  
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox">
        <span></span>
        <i class="indicator"></i>
    </label>
    <label>
        <input type="checkbox" checked>
        <span></span>
        <i class="indicator"></i>
    </label>
</body>
</html>


Output:-



Comments

Popular Posts