markdown 切换HTML，CSS，JavaScript

Posted 2021-05-05

# Toggle with HTML+CSS+JavaScript

HTML
```html
<div class="container">
  <div class="toggle-btn" 
      onclick="this.classList.toggle('active')">
    <div class="inner-circle"></div>
  </div>
</div>
```

CSS
```css
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toggle-btn {
  width: 80px;
  height: 40px;
  background-color: gray;
  border-radius: 30px;
  padding: 5px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.toggle-btn > .inner-circle {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
}
.toggle-btn.active {
  background-color: #00acee;
}
.toggle-btn.active > .inner-circle {
  margin-left: 40px;
}
```

https://codepen.io/anon/pen/eXNVbB