CSS imitates Apple's smooth switch button effect

CSS imitates Apple's smooth switch button effect

Source code

1. Code analysis

1.1 HTML code analysis

<div class="checkbox">
  <div class="inner" id="inner">
    <div class="toggle" id="toggle"></div>
  </div>
</div>

The outermost checkbox is the entire button, the inner is the area occupied by the green box under ON, and the toggle is the clickable ON and OFF area.

1.2 CSS code analysis to set body font and background color

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #dcdcdc;
}

Set the button's background color, position, circular border, top and bottom border color and thickness

.checkbox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(0deg, #d8d8d8, #cccccc);
  border-top: 0.02em solid #ececec;
  border-bottom: 0.02em solid #ececec;
}

Set the up, down, left, and right positions of the green background area to determine the width and height. Note that the width and height are not set here, the default is auto

Set background, circular border, shadow

.checkbox .inner{
  position: absolute;
  /* Because the width and height are not set, this is possible*/
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(0deg, #a5a5a5, #717171);
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}

Set the size, position, color, background, shadow, top and bottom border styles of the ON OFF button, and set the animation time on the button to 0.5s

.checkbox .inner .toggle{
  position: absolute;
  top: -3px;
  left: -3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(0deg, #ccc, #e4e4e4);
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
  box-sizing: border-box;
  border-top: 0.04em solid #ececec;
  border-bottom: 0.01em solid #ececec;
  transition: 0.5s;
}

Set the OFF style, the width and height are determined by the top, bottom, left, and right positioning, set the background, circular border, and line-height is used to set the font vertically centered.

.checkbox .inner .toggle:before{
  content: "OFF";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: linear-gradient(0deg, #e4e4e4, #ccc);
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  line-height: 28px;
  color: #a9a9a9;
}

Set the font of the button after clicking, ON, the reason why no other properties are written is because other properties inherit checkbox .inner .toggle:before

.checkbox .inner.active .toggle:before{
  content: "ON";
  color: #00d22d;
}

When the button is clicked, the slider moves to the right and changes the background color. The change time is 0.5s.

.checkbox .inner.active .toggle{
  left: 47px;
}
.checkbox .inner.active{
  background: linear-gradient(0deg, #00d22d, #158a00);
}

1.3 JavaScript code analysis

<script>
  let inner = document.getElementById('inner');
  let toggle = inner.children[0];
  toggle.addEventListener('click', ()=>{
    if(inner.classList.contains('active')){
      inner.classList.remove('active');
    }else {
      inner.classList.add('active');
    }
  })
</script>
  • First, get inner and toggle, a background color box, and a round button
  • Register the click event for the button toggle, and click the ON OFF button to make it effective
  • When inner is active, that is, the inner element contains the active class, then remove it. If it does not contain it, then add it. In any case, do the opposite operation.
  • When inner is active, the toggle will move right, and the inner background color will change. Set it in CSS
  • You are done. The process is as follows


2. Source code

2.1 HTML source code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="2020_12_24.css">
</head>
<body>
<div class="checkbox">
  <div class="inner" id="inner">
    <div class="toggle" id="toggle"></div>
  </div>
</div>
<script>
  let inner = document.getElementById('inner');
  let toggle = inner.children[0];
  toggle.addEventListener('click', ()=>{
    if(inner.classList.contains('active')){
      inner.classList.remove('active');
    }else {
      inner.classList.add('active');
    }
  })
</script>
</body>
</html>

2.2 CSS source code

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #dcdcdc;
}
.checkbox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(0deg, #d8d8d8, #cccccc);
  border-top: 0.02em solid #ececec;
  border-bottom: 0.02em solid #ececec;
}
.checkbox .inner{
  position: absolute;
  /* Because the width and height are not set, this is possible*/
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(0deg, #a5a5a5, #717171);
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}
.checkbox .inner .toggle{
  position: absolute;
  top: -3px;
  left: -3px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(0deg, #ccc, #e4e4e4);
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
  box-sizing: border-box;
  border-top: 0.04em solid #ececec;
  border-bottom: 0.01em solid #ececec;
  transition: 0.5s;
}
.checkbox .inner .toggle:before{
  content: "OFF";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: linear-gradient(0deg, #e4e4e4, #ccc);
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  line-height: 28px;
  color: #a9a9a9;
}
.checkbox .inner.active .toggle:before{
  content: "ON";
  color: #00d22d;
}
.checkbox .inner.active .toggle{
  left: 47px;
}
.checkbox .inner.active{
  background: linear-gradient(0deg, #00d22d, #158a00);
}

This is the end of this article about CSS imitating Apple's smooth switch button effect. For more related CSS smooth switch button content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Example of using HTML+CSS to implement a secondary menu bar when the mouse is moved

>>:  Recommend a cool interactive website made by a front-end engineer

Recommend

InnoDB type MySql restore table structure and data

Prerequisite: Save the .frm and .ibd files that n...

Detailed explanation of InnoDB architecture and features (summary of InnoDB storage engine reading notes)

Background Threads •Master Thread The core backgr...

Use JavaScript to create page effects

11. Use JavaScript to create page effects 11.1 DO...

Problems encountered in using MySQL

Here are some problems encountered in the use of ...

Linux installation MySQL tutorial (binary distribution)

This tutorial shares the detailed steps of instal...

A time-consuming troubleshooting process record of a docker error

Table of contents origin Environmental Informatio...

Chinese website user experience rankings

<br />User experience is increasingly valued...

Several ways to schedule backup of MySQL database (comprehensive)

Table of contents 1. mysqldump command to back up...

JavaScript to implement login form

This article example shares the specific code of ...

Solve the problem of ifconfig being unavailable in docker

Recently, when I was learning docker, I found tha...

Solution to the bug that IE6 select cannot be covered by div

Use div to create a mask or simulate a pop-up wind...

How to use mixins in Vue

Table of contents Preface How to use Summarize Pr...

The best solution for resetting the root password of MySQL 8.0.23

This method was edited on February 7, 2021. The v...

Detailed deployment of Alibaba Cloud Server (graphic tutorial)

I have recently learned web development front-end...

XHTML introductory tutorial: Use of list tags

Lists are used to list a series of similar or rela...