iOS Style Toggle Buttons Using CSS

IOS Style Toggle Button Using CSS
Code Snippet:Pure CSS IOS Style Checkbox
Author: Sercan Eraslan
Published: January 3, 2024
Last Updated: January 22, 2024
Downloads: 165
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...