iOS-Style Switch Button: A Simple Step-by-Step Guide

Have you ever wanted to create an iOS-style switch button for your web apps? No need to be an expert! Let’s create one together using HTML, CSS, and JavaScript.

Pre-requisites

Basic knowledge of HTML, CSS, and JavaScript.
A text editor of your choice.

Let’s deep dive into the code
Create a new file named index.html within your project folder and add the following HTML code:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IOS Button</title>

    <!-- Link to the external CSS file for styling -->
    <link rel="stylesheet" href="./styles.css" />

    <!-- Link to the external JavaScript file for functionality -->
    <script defer src="./main.js"></script>
  </head>
  <body>
    <!-- Container for the switch button -->
    <div class="switch-container">

      <!-- Box containing the image and text -->
      <div class="pack-box">
        <!-- Image for the switch button -->
        <img id="svg-icon" src="./active.svg" />
        <!-- Text for the switch button -->
        <p>Notification Alert</p>
      </div>

      <!-- Label associating the input with the switch functionality -->
      <label for="switch-1" class="switch">
        <!-- Input checkbox acting as the switch button -->
        <input type="checkbox" id="switch-1" onClick="handleChange()" />
        <!-- Span element creating the appearance of the slider button -->
        <span class="slider"></span>
      </label>

    </div>
  </body>
</html>

I’ve structured the content to include a switch container .switch-container housing a pack box .pack-box holding an image .svg-icon and text "Notification Alert". A label .switch is associated with a checkbox input .switch-1 and a span .slider to create the appearance of a slider button.

Styling the Switch Button with CSS
To style the switch button, create a file named styles.css and link it to your HTML file. Begin by ensuring proper alignment and centering of elements:

/* Centering body content */ 
body {
  height: 100dvh;
  width: 100dvw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling container */ 
.switch-container {
  width: 300px;
  height: 150px;
  border: 3px solid #636363;
  border-radius: 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}


.switch-container img {
  width: 25px;
}

/* Styling box with image and text */
.pack-box {
  display: flex;
  gap: 1rem;
}

Moving to the main logic for the switch button styling, we define its dimensions and behavior. The .switch class sets the width and height of the label and positions it relatively:

/* Styling switch button */
.switch {
  width: 60px;
  height: 35px;
  display: inline-block;
  cursor: pointer;
  position: relative;
}

The .slider class positions the slider element absolutely within its container, ensuring it fills the entire area with flush positioning:

/* Styling slider button */ 
.switch .slider {
  position: absolute;
  inset: 0;
  background: rgb(145, 145, 145);
  border-radius: 25px;
}

To hide the checkbox, set its display property to none:

/* Hiding checkbox input */ 
.switch input {
  display: none;
}

Using the ::before pseudo-class, add a blank content before the slider to center the toggle button and change its appearance to circular:

/* Styling slider appearance */
.switch .slider::before {
  content: "";
  position: absolute;
  height: 27px;
  width: 27px;
  left: 5px;
  top: 4px;
  background: white;
  transition: 0.5s all;
  border-radius: 50%;
}

By leveraging the :checked pseudo-class, we modify the background color of the slider to green when the switch is toggled:

/* Styling checked state */
.switch input:checked + .slider {
  background: rgb(12, 235, 12);
}

Lastly, to enable the slider button to move when toggled, use the transform property to translate it horizontally:

 /* Styling slider movement */
.switch input:checked + .slider::before {
  transform: translateX(23px);
}

These CSS rules make sure the switch button works smoothly. It changes its look and moves as expected when you toggle it.

Adding JavaScript for Interactivity

Create a file named main.js and link it to your HTML file. Use the following JavaScript code to change the icon when toggling:

Main.js

const svgIcon = document.querySelector("#svg-icon");

const handleChange = () => {
  // Toggle icon based on switch state
  if (document.getElementById("switch-1").checked) {
    svgIcon.src = "./active.svg";
  } else {
    svgIcon.src = "./nonActive.svg";
  }
};

Conclusion
Creating an iOS-style switch button for your web applications is achievable with basic knowledge of HTML, CSS, and JavaScript. By following the simple steps outlined in this guide. Feel free to customize the styling and functionality to suit your specific needs and preferences.

For the full code and resources used in this tutorial, you can find them in my GitHub repository: https://github.com/Bishal-Pahari/iOS-Button

Blog

iOS-Style Switch Button: A Simple Step-by-Step Guide

Bishal Pahari

Pre-requisites

Join Our Newsletter. No Spam, Only the good stuff.

Related