This browser does not support the video element.
Toggle buttons are the simplest form of user input. It allows a user to toggle between 2 choices of values. The toggle button is an HTML input tag where the type of input is a checkbox. The basic functionality of a toggle button with simple animations can be implemented using CSS properties. If you need more complex animations, you need to use javascript. In this, blog, the most commonly used toggle button animations are discussed.
1. Simple Toggle Button
This browser does not support the video element.
This is one of the simplest forms of the toggle button used. The features such as color, speed of animation, border-radius, etc can be customized as you wish. This toggle button works without using any javascript. The working code for this toggle button is provided below.
#button-1 .knobs:before{content: '';position: absolute;top: 4px;left: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;background-color: #fff;border-radius: 50%;transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-1 .checkbox:checked + .knobs:before{content: '';left: 32px;background-color: #fff;}
#button-1 .checkbox:checked ~ .layer{background-color: #17c2bd;}
#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer{transition: 0.3s ease all;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
<body>
<div class="button r center" id="button-1">
<input type="checkbox" class="checkbox">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</body>
2. Elastic Toggle Button
This browser does not support the video element.
This type of toggle button provides a stretchy elastic feel when clicked. All the basic features such as color, speed of animation, border-radius, etc can be customized to get a custom look to your button. The working code for this toggle button is provided below.
/* Button css */
#button-3 .knobs:before{content: '';position: absolute;top: 4px;left: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;background-color: #fff;border-radius: 50%;transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-3 .checkbox:active + .knobs:before{width: 46px;border-radius: 100px;}
#button-3 .checkbox:checked:active + .knobs:before{margin-left: -26px;}
#button-3 .checkbox:checked + .knobs:before{content: '';left: 32px;background-color: #fff;}
#button-3 .checkbox:checked ~ .layer{background-color: #17c2bd;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
<body>
<div class="button r center" id="button-3">
<input type="checkbox" class="checkbox">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</body>
3. Up Down Toggle Button
This browser does not support the video element.
This toggle button toggles in the up-down direction when clicked. Similar to the other toggle buttons, this button also does not use any javascript, and its features can be customized to change its look. The working code for this toggle button is provided below.
/* Button css */
#button-4 .knobs:before, #button-4 .knobs:after{position: absolute;top: 4px;left: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;background-color: #fff;border-radius: 50%;transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;}
#button-4 .knobs:before{content: '';box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-4 .knobs:after{content: '';box-shadow: none;}
#button-4 .knobs:after{top: -28px;right: 4px;left: auto;background-color: #fff;}
#button-4 .checkbox:checked + .knobs:before{top: -28px;box-shadow: none;}
#button-4 .checkbox:checked + .knobs:after{top: 4px;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-4 .checkbox:checked ~ .layer{background-color: #17c2bd;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
<body>
<div class="button r center" id="button-4">
<input type="checkbox" class="checkbox">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</body>
4. In Out Toggle Button
This browser does not support the video element.
This type of toggle button is commonly used in lock-unlock uses. The button moves in an outward-inward direction when clicked. This button also does not use any javascript, and its features can be customized to change its look. The working code for this toggle button is provided below.
/* Button css */
#button-12 .knobs:before, #button-12 .knobs:after, #button-12 .knobs span, #button-12 .knobs span:before, #button-12 .knobs span:after{position: absolute;top: 4px;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;border-radius: 50%;transition: 0.3s ease all;}
#button-12 .knobs:before{content: '';left: 4px;}
#button-12 .knobs:after{content: '';right: 4px;}
#button-12 .knobs:before, #button-12 .knobs:after{width: 27px;height: 10px;color: #4e4e4e;padding: 9px 3px;z-index: 1;}
#button-12 .knobs span{display: inline-block;z-index: 2;}
#button-12 .knobs span, #button-12 .knobs span:before, #button-12 .knobs span:after{width: 20px;height: 10px;padding: 9px 4px;}
#button-12 .knobs span:before, #button-12 .knobs span:after{content: '';top: 0;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-12 .knobs span:before{left: 4px;background-color: #fff;}
#button-12 .knobs span:after{right: -74px;background-color: #fff;}
#button-12 .checkbox:checked + .knobs span:before{left:-28px;}
#button-12 .checkbox:checked + .knobs span:after{right: -32px;}
#button-12 .checkbox:checked ~ .layer{background-color: #17c2bd;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
<body>
<div class="button r center" id="button-12">
<input type="checkbox" class="checkbox">
<div class="knobs">
<span></span>
</div>
<div class="layer"></div>
</div>
</body>
5. Bounce Effect Toggle Button
This browser does not support the video element.
This toggle button provides a bouncy effect when clicked. The features such as color, speed of animation, border-radius, etc can be customized as you wish. This toggle button works without using any javascript. The working code for this toggle button is provided below.
/* Button css */
#button-15 .knobs:before, #button-15 .knobs:after{position: absolute;top: 4px;width: 20px;height: 10px;color: #fff;font-size: 10px;font-weight: bold;text-align: center;line-height: 1;padding: 9px 4px;opacity: 1;border-radius: 50%;transform: scale(1);transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;}
#button-15 .knobs:before{content: '';left: 4px;background-color: #fff;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);}
#button-15 .knobs:after{content: '';right: 4px;opacity: 0;transform: scale(4);background-color: #fff;}
#button-15 .checkbox:checked + .knobs:before{opacity: 0;transform: scale(4);}
#button-15 .checkbox:checked + .knobs:after{opacity: 1;transform: scale(1);}
#button-15 .checkbox:checked ~ .layer{background-color: #17c2bd;}
.knobs, .layer{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.button{position: relative;top: 50%;width: 65px;height: 36px;margin: -20px auto 0 auto;overflow: hidden;margin: 0;}
.button.r, .button.r .layer{border-radius: 100px;}
.checkbox{position: relative;width: 100%;height: 100%;padding: 0;margin: 0;opacity: 0;cursor: pointer;z-index: 3;}
.knobs{z-index: 2;}
.layer{width: 100%;background-color: #d3d3d3;transition: 0.3s ease all;z-index: 1;}
<body>
<div class="button r center" id="button-15">
<input type="checkbox" class="checkbox">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</body>