Using special taggle switches can make your website unique and visible. In this post, we have prepared one of these special switches. These switches are more beautiful with a blue and pink gradient background. The slider circle in this switch has turned into tears and its color is blue and pink gradient.


HTML
<!-- This script got from www.devanswer.com  -->
<div id="tg_button">
  <div class="indicator"> </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
* {
    margin: 0;
    padding: 0
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right top, #FB0712, #124FEB)
}
#tg_button {
    height: 50px;
    width: 140px;
    background-color: #fff;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1)
}
#tg_button .indicator {
    position: absolute;
    height: 42px;
    width: 42px;
    border-radius: 49% 51% 0% 100% / 60% 49% 79% 59%;
    background-image: linear-gradient(to right top, #FB0712, #124FEB);
    top: 3px;
    left: 4px;
    transition: all 0.5s
}
#tg_button .active {
    left: 92px;
    border-radius: 49% 51% 100% 0% / 60% 49% 51% 70%
}
Javascript
document.addEventListener("DOMContentLoaded", function(event) {
  const tg_button = document.getElementById('tg_button');
  const indicator = document.querySelector(".indicator");
  tg_button.onclick = function(){
  indicator.classList.toggle('active');
}
});