DEV Community

Designyff
Designyff

Posted on • Originally published at designyff.com

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

Neon toggle button

HTML

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

<div class="toggle">
    <div class="circle"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

And that is it.

You can find video tutorial and full code here.

Thank you for reading. ❤️

Top comments (0)