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

Detailed explanation of six web page image carousel effects implemented with JavaScript

Table of contents 1. When the mouse passes over t...

Color matching techniques and effect display for beauty and styling websites

Color is one of the most important elements for a...

Pure CSS header fixed implementation code

There are two main reasons why it is difficult to...

VMware virtual machine to establish HTTP service steps analysis

1. Use xshell to connect to the virtual machine, ...

CSS eight eye-catching HOVER effect sample code

1. Send effect HTML <div id="send-btn&quo...

Quickly master the use of Docker to build a development environment

As the platform continues to grow, the project...

Key issues and solutions for web page access speed

<br /> The website access speed can directly...

How to modify the previous command when an input error occurs in the MySQL command prompt

Table of contents Current Issues Solution process...

Detailed explanation of 30 SQL query optimization techniques for MySQL tens of millions of large data

1. To optimize the query, try to avoid full table...

About if contains comma expression in JavaScript

Sometimes you will see English commas ",&quo...

Interviewers often ask questions about React's life cycle

React Lifecycle Two pictures to help you understa...

Vue implements graphic verification code

This article example shares the specific code of ...

How to use Docker-compose to build an ELK cluster

All the orchestration files and configuration fil...

MySQL database query performance optimization strategy

Optimize queries Use the Explain statement to ana...

Fixed table width table-layout: fixed

In order to make the table fill the screen (the re...