How to Create a CSS-Only Toggle Button

With the growing eco-system of CSS, designers, and developers are continually seeking ways to leverage its power for interactive UI elements. One such element is the toggle button, an essential interactive component. While more complex features might require JavaScript or additional libraries, this guide focuses on how to create a CSS-only toggle button, providing you with the fundamental understanding that serves as the stepping stone to more advanced concepts.

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Setting the HTML Structure for Our Toggle Button

The first step towards creating a CSS-only toggle button is setting up a suitable HTML structure. We’ll use the following code:

<label class="toggle-switch">
  <input type="checkbox">
  <span class="switch"></span>
</label>

Our structure begins with a <label> element, containing an <input> of type checkbox and a <span>. The checkbox input is what we’ll be toggling. The <span> element, meanwhile, will be visually representing our switch. When the checkbox is clicked, we’ll use CSS to visually “move” the switch within the label.

Styling the Toggle Button with CSS

With our HTML structure established, we turn to CSS to bring our toggle button to life. Here’s the CSS code with comments explaining each section:

/* Defines the switch's outer container */
.toggle-switch {
  display: inline-block;  
  position: relative;     
  width: 60px;            
  height: 34px;           
}

/* Hides the actual checkbox input */
.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Styles the switch's slider */
.switch {
  position: absolute;    
  cursor: pointer;       
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;        
  border-radius: 34px;    
}

/* Styles the switch's circle that moves back and forth */
.switch::before {
  position: absolute;
  content: "";            
  height: 26px;           
  width: 26px;
  left: 4px;              
  bottom: 4px;
  background-color: white;
  transition: .4s;        
  border-radius: 50%;    
}

/* Changes the background color and circle position when checked */
input:checked + .switch {
  background-color: #4caf50; 
}

input:checked + .switch::before {
  transform: translateX(26px);
}

In our CSS code, we initially set up a container for our switch using the .toggle-switch rule. This rule sets the dimensions and positioning of the switch.

Next, the .toggle-switch input rule hides the actual checkbox input. While it’s hidden from the visual UI, the input remains functional and can be interacted with programmatically.

The .switch rule then provides styling for the switch’s slider, setting the color, shape, and transition effect.

The .switch::before rule styles the circle within the switch, which moves left and right when the switch is toggled.

Lastly, the input:checked + .switch and input:checked + .switch::before rules control the appearance of the switch when it’s checked, changing the background color of the slider and the position of the circle, respectively.

See the Pen
Button Toggle with CSS only by 1stWebDesigner (@firstwebdesigner)
on CodePen.0

Going Beyond the Basics

The CSS-only toggle button in this tutorial is a simplified model. When complexity escalates with various user interactions and state management, JavaScript may become necessary. If your design demands more detail—icons, labels, or complex transitions—you’ll need a more advanced mix of HTML, CSS, or even SVG and JavaScript. These variations present their own trade-offs in simplicity, flexibility, and browser compatibility, which are critical considerations when designing UI elements.

Venturing beyond this demonstration, the principles we’ve touched upon here will act as your compass. Remember, effective design doesn’t solely hinge on mastering individual technologies, but on understanding how they synergize.