<!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>Button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <label>
        <input type="checkbox" id="start">
        <div class="wrapper">
            <div class="lampe"></div>
            <div class="bord">
                <div class="neon">
                    <div class="int">
                        <div class="bouton">
                            <span class="picto">
                                <svg id="Calque_1" x="0px" y="0px" viewBox="0 0 110 110">
                                    <line class="st0" x1="50" y1="3.4" x2="50" y2="57.4" />
                                    <path class="st0" d="M31,23.9c-10.8,6.5-18,18.2-18,31.7c0,20.4,16.6,37,37,37s37-16.6,37-37c0-13.5-7.2-25.3-18-31.7" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </label>
    <div class="channels">
        <label>
            <input type="checkbox">
            <div class="wrap">1</div>
        </label>
        <label>
            <input type="checkbox">
            <div class="wrap">2</div>
        </label>
        <label>
            <input type="checkbox">
            <div class="wrap">3</div>
        </label>
    </div>
</body>
</html>

CSS CODE


@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
:root {
    --largeur: 50vw;
    --bodyBg: #353334;
    --anneauExt: #252324;
    --width: 16vw;
    --height: calc(var(--width) * 1.375);
}
*::after,
*::before {
    content: "";
    position: absolute;
}
*,
body {
    position: relative;
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--bodyBg);
}
.image {
    position: absolute;
    width: var(--largeur);
    height: var(--largeur);
    overflow: hidden;
    top: 0;
    left: 0;
}
.image img {
    width: 80%;
}
.wrapper {
    position: relative;
    width: var(--width);
    height: var(--height);
    margin: 25px auto;
    background-color: var(--bodyBg);
}
.bord {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--width);
    height: var(--width);
    background-color: var(--anneauExt);
    border-radius: 50%;
}
.neon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--width) - 1.2vw);
    height: calc(var(--width) - 1.2vw);
    transform: translate(0.7vw, -0.7vw);
    border-radius: 50%;
    background-image: radial-gradient(
        closest-side at 50% 50%,
        black 80%,
        #1e4107,
        #8bff24,
        #1e4107,
        black
    );
}
.int {
    position: absolute;
    top: 10%;
    left: 10%;
    border-radius: 50%;
    width: 80%;
    height: 80%;
    background-image: linear-gradient(var(--anneauExt) 25%, #403e41);
    box-shadow: 0px 7px 3px black inset, 0px -3px 3px black inset,
        0px -8px 4px #505050 inset;
    transition: box-shadow 0.5s;
}
.lampe {
    position: relative;
    margin: 0 auto;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    box-shadow: 0px 3px 1px #505050;
    background-image: radial-gradient(
        closest-corner at 65% 65%,
        #8bff24,
        #1e4107,
        black
    );
}
.lampe:after {
    width: 36%;
    height: 29%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(-31deg);
    top: 7%;
    left: 26%;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}
input[type="checkbox"] {
    width: 0;
    height: 0;
    opacity: 0;
}
.bouton {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.picto {
    position: absolute;
    width: 45%;
    height: 45%;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
svg {
    width: 100%;
    height: 100%;
}
.st0 {
    fill: none;
    stroke: #8bff24;
    stroke-width: 13;
    stroke-miterlimit: 10;
    filter: blur(1px);
    -webkit-filter: blur(1px);
    transition: stroke 0.5s;
}
input:checked ~ .wrapper .picto .st0 {
    stroke: black;
}
input:checked ~ .wrapper .neon {
    background-image: radial-gradient(
        closest-side at 50% 50%,
        black 80%,
        #525252,
        #878787,
        #525252,
        black
    );
}
input:checked ~ .wrapper .lampe {
    background-image: radial-gradient(
        closest-corner at 65% 65%,
        #878787,
        #2a2a2a,
        black
    );
}
input:checked ~ .wrapper .int {
    box-shadow: 0px 3px 3px black inset, 0px 8px 2px #505050 inset,
        0px -4px 3px black inset;
}
.wrap {
    position: relative;
    display: inline-block;
    margin: 1vw;
    width: calc(var(--width) / 4);
    height: calc(var(--width) / 4);
    border-radius: 25%;
    background-color: rgba(255, 255, 255, 0.4);
    background-image: radial-gradient(
        farthest-corner at 50% -7%,
        #738190,
        #424f58 48%
    );
    overflow: hidden;
    /*box-shadow: 0px 2px 2px black, 0px -2px 2px black, 2px 0px 2px black, -2px 0px 2px black;*/
    text-align: center;
    font-size: 2vw;
    font-family: "Roboto", sans-serif;
    line-height: calc(var(--width) / 4);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 1s;
    animation: examplee 0.5s linear both;
}
@keyframes examplee {
    0% {
        box-shadow: 0px 8px 16px black inset, 0px -8px 16px black inset,
            8px 0px 16px black inset, -8px 0px 16px black inset;
    }
    25% {
        box-shadow: 0px 0 0 black inset, 0px 0 0 black inset, 0 0px 0 black inset,
            0 0px 0 black inset;
    }
    50% {
        box-shadow: 0px 0 0 black, 0px 0 0 black, 0 0px 0 black, 0 0px 0 black;
    }
    100% {
        box-shadow: 0px 2px 2px black, 0px -2px 2px black, 2px 0px 2px black,
            -2px 0px 2px black;
    }
}
.wrap:after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.3);
    filter: brightness(0.9);
    filter: blur(1px);
    box-shadow: 0px -1px 5px #8aa0b5 inset;
}
.wrap:before {
    top: 0;
    left: 50%;
    width: 100%;
    height: 50%;
    background-color: #c8dcf5;
    transform: translate(-50%, -90%);
    border-radius: 50%;
    filter: blur(10px);
    opacity: 1;
}
.wrap:active,
input:checked ~ .wrap {
    /*box-shadow: 0px 8px 16px black inset, 0px -8px 15px black inset, 8px 0px 15px black inset, -8px 0px 15px black inset;*/
    color: #8bff24;
    animation: example 0.5s linear both;
}
@keyframes example {
    0% {
        box-shadow: 0px 2px 2px black, 0px -2px 2px black, 2px 0px 2px black,
            -2px 0px 2px black;
    }
    25% {
        box-shadow: 0px 0 0 black, 0px 0 0 black, 0 0px 0 black, 0 0px 0 black;
    }
    50% {
        box-shadow: 0px 0 0 black inset, 0px 0 0 black inset, 0 0px 0 black inset,
            0 0px 0 black inset;
    }
    100% {
        box-shadow: 0px 8px 16px black inset, 0px -8px 16px black inset,
            8px 0px 16px black inset, -8px 0px 16px black inset;
    }
}
input:checked ~ .wrap:after,
input:checked ~ .wrap:before {
    opacity: 0;
}
.channels {
    text-align: center;
    width: 100%;
    opacity: 1;
}