iOS Style Toggle Buttons Using CSS

If you’re looking to enhance your web design with sleek iOS style toggle buttons, this step-by-step guide will walk you through the process using CSS. These buttons not only offer a modern aesthetic but also provide a user-friendly interface without the need for JavaScript.

The code provided in this tutorial hides checkboxes and styles labels to mimic IOS toggle buttons. The labels change text and color based on the checkbox state, providing a sleek and user-friendly interface. Helpful for creating modern, visually appealing toggles without JavaScript.

How to Create Ios Style Toggle Button Using CSS

1. Before diving into the toggle button styling, make sure to include the Meyer Reset CSS to ensure a consistent starting point across different browsers.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Create a table structure in your HTML, incorporating the necessary checkboxes and labels for each toggle button. Customize the labels and checkbox IDs as needed for your project.

Edit the labels within the HTML to reflect the specific functionality of each toggle button. Adjust the data-on and data-off attributes according to your application’s requirements.

<table>
  <thead>
    <tr>
      <th>Description</th>
      <th>Mail</th>
      <th>SMS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notifications</td>
      <td>
        <input type="checkbox" id="closed" class="toggle" checked>
        <label for="closed" data-on="Open" data-off="Close">Open / Close</label>
      </td>
      <td>
        <input type="checkbox" id="open" class="toggle">
        <label for="open" data-on="Yes" data-off="No">Yes / No</label>
      </td>
    </tr>
    <tr>
      <td>Opportunities</td>
      <td>
        <input type="checkbox" id="disabled" class="toggle" checked disabled>
        <label for="disabled" data-on="On" data-off="Off">Disabled</label>
      </td>
      <td>
        <input type="checkbox" id="empty" class="toggle" disabled>
        <label for="empty" data-on="On" data-off="Off">Empty</label>
      </td>
      </td>
    </tr>
    <tr>
      <td>Messages</td>
      <td>
        <input type="checkbox" id="checked" class="toggle" checked>
        <label for="checked">Checked</label>
      </td>
      <td>
        <input type="checkbox" id="notChecked" class="toggle">
        <label for="notChecked">Not Checked</label>
      </td>
      </td>
    </tr>
  </tbody>
</table>

3. Now, let’s add the CSS styles to achieve the IOS-style toggle button appearance. The provided CSS code includes both the styling for normal and disabled toggle buttons.

/*
*
* Pure CSS IOS Style Checkbox
*
*/
.toggle {
  display: none;
}
.toggle+label {
  display: inline-block;
  width: 64px;
  height: 27px;
  background: #ededed;
  color: transparent;
  cursor: pointer;
  -webkit-box-shadow: -1px 1px 1px 1px #d2d2d2 inset;
  box-shadow: -1px 1px 1px 1px #d2d2d2 inset;
  border-radius: 15px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}
.toggle+label:before {
  content: "";
  display: inline-block;
  height: 19px;
  width: 19px;
  background-color: #fdfdfd;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
  background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
  background-image: -o-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
  background-image: -ms-linear-gradient(top, transparent 0%, rgba(0,0,0,0.2) 100%);
  background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 100%);
  border: 1px solid #bababa;
  border-radius: 50%;
  -webkit-box-shadow: -1px 1px 1px 1px #d2d2d2, 0px 0px 1px 1px rgba(255,255,255,0.2) inset;
  box-shadow: -1px 1px 1px 1px #d2d2d2, 0px 0px 1px 1px rgba(255,255,255,0.2) inset;
  z-index: 3;
  position: absolute;
  top: 3px;
  left: 4px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.toggle+label:after {
  content: attr(data-off);
  font-size: 10px;
  font-weight: 700;
  color: #333;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 9px;
  left: 28px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.toggle:checked+label:before {
  background-color: #3fbd92;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.15) 100%);
  background-image: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.15) 100%);
  background-image: -o-linear-gradient(top, transparent 0%, rgba(0,0,0,0.15) 100%);
  background-image: -ms-linear-gradient(top, transparent 0%, rgba(0,0,0,0.15) 100%);
  background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 100%);
  border: 1px solid #229671;
  left: 39px;
}
.toggle:checked+label:after {
  content: attr(data-on);
  left: 9px;
}
.toggle:disabled+label:after,
.toggle:checked:disabled+label:after {
  color: #999;
}
.toggle:checked:disabled+label:before {
  background: -webkit-linear-gradient(top, #9fd6c3 0%, #9bccbd 100%);
  background: -moz-linear-gradient(top, #9fd6c3 0%, #9bccbd 100%);
  background: -o-linear-gradient(top, #9fd6c3 0%, #9bccbd 100%);
  background: -ms-linear-gradient(top, #9fd6c3 0%, #9bccbd 100%);
  background: linear-gradient(to bottom, #9fd6c3 0%, #9bccbd 100%);
  border: 1px solid #abdaca;
}
/*
*
* For Codepen Presention
*
*/
body {
  font-family: "Helvetica", Arial, Sans;
}
body table {
  margin: 25px auto;
}
body table th {
  font-weight: 700;
  padding: 10px;
}
body table td {
  width: 100px;
  text-align: center;
  padding: 10px;
}
body table td:first-child {
  width: 400px;
  text-align: left;
  color: #333;
  font-size: 12px;
}
body table tbody td {
  border: 1px solid #dbdbdb;
}

That’s all! hopefully, you have successfully created the iOS Style Toggle Button Using CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.