iOS-Style Switch Button: A Simple Step-by-Step Guide
Published: 2024-03-16 07:37:50


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.

![iOS switch Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm6w04djqt32yulrlf7t.png)

## 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.

![HTML Element visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfxlesi8cpw5ji6abhfv.png)

**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%;
}
```

![Switch button without toggling effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt5kp0sdippg0omqdf8i.png)
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.

![fully functional iOS-style switch button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/md04hdynvdtmnlkdbhqy.gif)
**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