Back

Neon toggle button - CSS

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

HTML

For HTML, we just need a div element for toggle button with a div element for circle inside.

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

CSS

For CSS, first, we'll style the toggle button. We'll position it relative and set width to twice as much as the height: 40x20 pixels. With 20px border radius, this element will have rounded sides. Let's add some dark gray border, cursor pointer and transition.

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

For circle, first, we'll create a circle by setting width and height to 20px and border radius. Since this circle will move on toggle, we'll position it absolute and set left to 0. With 2 pixels of margin, the circle won't touch the toggle's border. We'll set transition, border and box-sizing to border-box, so that the border width is included in the elements width and height.

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

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

        .toggle:hover {
            border-color: rgb(217, 176, 255);
            transition: 0.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. And we'll set neon color to border and add several box shadows to it, to make it look like a neon light.

        .toggle:hover .circle {
            left: 20px;
            transition: 0.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);
        }

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: 0.2s;
  cursor: pointer;
}
.circle {
  width: 16px;
  height: 16px;
  border-radius: 20px;
  background-color: transparent;
  position: absolute;
  left: 0;
  margin: 2px;
  transition: 0.2s;
  border: 1px solid #444;
  box-sizing: border-box;
}
.toggle:hover {
  border-color: rgb(217, 176, 255);
  transition: 0.2s;
  box-shadow: 0 0 50px rgb(217, 176, 255);
}
.toggle:hover .circle {
  left: 20px;
  transition: 0.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>

Neon toggle button - CSS

HTML

CSS

Whole code

Comments

More toggle-buttons

Similar

See also