CSS imitates Apple's smooth switch button effect

1. Code analysis
2. Source code

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

MySQL 8.0.17 installation and configuration graphic tutorial

CSS imitates Apple's smooth switch button effect

Table of contents

1. Code analysis

2. Source code

MySQL 8.0.17 installation and configuration graphic tutorial

Detailed explanation of the configuration method of MySQL master-slave replication read-write separation

A brief discussion on three methods of asynchronous replication in MySQL 8.0

How to deploy nextcloud network disk using docker

How to detect Ubuntu version using command line

Detailed explanation of the code for implementing linear gradients with CSS3

Build a WebRTC video chat in 5 minutes

MySQL spatial data storage and functions

js code that associates the button with the enter key

An example of elegant writing of judgment in JavaScript

Recommend

Install mysql5.7.13 using RPM in CentOS 7

CentOS method to modify the default ssh port number example

Detailed explanation of the usage and differences of MySQL views and indexes

Detailed tutorial on minimizing the installation of CentOS 8.1 virtual machine in VirtualBox

Scoring rules of YSlow, a webpage scoring plugin developed by Yahoo

Detailed explanation of the implementation of nginx process lock

Detailed configuration of Nginx supporting both Http and Https

Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation

The specific use and difference between attribute and property in Vue

How to use CocosCreator for sound processing in game development

Example code for converting Mysql query result set into JSON data

Linux file management command example analysis [display, view, statistics, etc.]

Detailed explanation of crontab scheduled execution command under Linux

Installation and uninstallation of MySQL 5.7 decompressed version and summary of common problems

How to use the HTML form attributes readonly and disabled