Neon toggle button - CSS - A step-by-step guide

HTML

For HTML we need two elements. A toggle class and a circle inside toggle.

<div class="toggle">
    <div class="circle"></div>
</div>

CSS

For CSS, first we'll style toggle class. We'll set position to relative and 40x20 pixels.

We'll set border radius to 20px and border to dark grey as if button is off.

Then we'll set cursor to pointer and transition.

.toggle {
    position: relative;
    width: 40px;
    height: 20px;
    border: 1px solid #444;
    border-radius: 20px;
    transition: .2s;
    cursor: pointer;
}

For circle, first, we'll create a circle by setting width and height to 20px and border radius.

Now we'll set background color to transparent, position to absolute, left, with margin of 2px.

We'll add transition and border same as at "toggle" class.

Lastly, we'll set box sizing to border box, which means that the width and height includes paddings and borders along with content, which means that the actual size of circle is 14x14 plus 1 pixel of border on each side.

.circle {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: transparent;
    position: absolute;
    left: 0;
    margin: 2px;
    transition: .2s;
    border: 1px solid #444;
    box-sizing: border-box;
}

On hover, we'll set "toggle" border and box shadow to neon purple, and transition, so that this change is smooth.

.toggle:hover {
    border-color: rgb(217, 176, 255);
    transition: .2s;
    box-shadow: 0 0 50px rgb(217, 176, 255);
}

As for circle, on toggle hover, we'll move it to the right by 20px and set transition.

We'll also set border and box shadow to neon purple.

Here we'll add two shadows, one inset and one out.

.toggle:hover .circle {
    left: 20px;
    transition: .2s;
    border-color: rgb(217, 176, 255);
    box-shadow: 0 0 30px rgb(217, 176, 255),
        inset 0 0 10px rgb(217, 176, 255, 0.2);
}

And that is it.

You can find video tutorial and full code here.

Thank you for reading. ❤️