Back

Neon toggle button - CSS

Tutorial on how to create a toggle neo button on hover - CSS only.

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.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

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

<style>
.toggle {
  position: relative;
  width: 40px;
  height: 20px;
  border: 1px solid #444;
  border-radius: 20px;
  transition: .2s;
  cursor: pointer;
}
.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;
}
.toggle:hover {
  border-color: rgb(217, 176, 255);
  transition: .2s;
  box-shadow: 0 0 50px rgb(217, 176, 255);
}
.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);
}

</style>

Thank you for reading this article.

Neon toggle button - CSS

HTML

CSS

Video tutorial

Whole code

More toggle-buttons

Similar

See also