编程知识 cdmana.com

Daily CSS_ Apple like smooth switch button

everyday CSS_ Apple like smooth switch button

2020_12_24

 Smooth button

Source code


1. Code parsing

1.1 html Code parsing

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

Outermost layer checkbox, It's the whole button , inner yes ON The area occupied by the lower green box , toggle It's clickable ON and OFF Area .


1.2 css Code parsing

  • Set up body Font and background color
body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #dcdcdc;
}
  • Sets the background color of the button , Location , Round 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 up Green background area Up, down, left and right , To determine the width and height , Be careful , There's no width or height here , The default is auto

    Set the background , Round border , shadow

.checkbox .inner{
  position: absolute;
  /*  Because there's no width and height ,  So you can do this  */
  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 up ON OFF Button size , Location , Color , background , shadow , Top and bottom border styles , 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 up OFF The style of ,, It's determined by the positioning up, down, left and right Width and height , Set the background , Round border , line-height Used to set the font vertical center
.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 up Click the font of the button , ON, All of them don't write other properties , It's because other properties inherit checkbox .inner .toggle:before
.checkbox .inner.active .toggle:before{
  content: "ON";
  color: #00d22d;
}
  • When the button is hit , The slider moves right , And change the background color , Change the time to 0.5s
.checkbox .inner.active .toggle{
  left: 47px;
}
.checkbox .inner.active{
  background: linear-gradient(0deg, #00d22d, #158a00);
}

1.3 javascript Code parsing

<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>
  1. First get inner and toggle, A background color box , A round button
  2. Give button toggle Register click events , Click on ON OFF The button works
  3. When inner be in active, That is to say inner The element contains active class , Then remove , If not , Then add , Do the opposite operation anyway
  4. When inner be in active, toggle It will move right , inner The background color changes , stay css in Set up
  5. Be accomplished , The process is as follows

active

active


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 there's no width and height ,  So you can do this  */
  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);
}

版权声明
本文为[Be at ease when you meet him]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224214721836t.html

Scroll to Top