├── .gitattributes
├── README.md
├── demo.jpg
├── index.css
├── index.html
└── index.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # switch-button-html-css-js
2 | Smooth switch button use only HTML, CSS, Javascript
3 |
4 | 
--------------------------------------------------------------------------------
/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trananhtuat/switch-button-html-css-js/55714ec18399f4e74f383601e8f01028e6a7e332/demo.jpg
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #000;
3 | }
4 |
5 | .button-box {
6 | width: 220px;
7 | margin: 35px auto;
8 | position: relative;
9 | border-radius: 30px;
10 | background: #fff
11 | }
12 |
13 | .toggle-btn {
14 | padding: 10px 40px;
15 | cursor: pointer;
16 | background: transparent;
17 | border: 0;
18 | outline: none;
19 | position: relative;
20 | text-align: center;
21 | }
22 |
23 | #btn {
24 | left: 0;
25 | top: 0;
26 | position: absolute;
27 | width: 110px;
28 | height: 100%;
29 | background: #e67e22;
30 | border-radius: 30px;
31 | transition: .5s;
32 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Switch button
5 |
6 |
7 |
8 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var btn = document.getElementById('btn')
2 |
3 | function leftClick() {
4 | btn.style.left = '0'
5 | }
6 |
7 | function rightClick() {
8 | btn.style.left = '110px'
9 | }
--------------------------------------------------------------------------------