content logo

Bootstrap Toggle Switches:

Bootstrap Dark Blue Toggle Switch

You can use this code whenever you need to ask questions from the user and these questions always have a yes or no answer or specific answers that are only two. We have a switch in this code. This switch has a beautiful effect that can attract more user attention. When we click on this switch and hold the click, the rolling circle will be drawn and will have an oval shape.

#Free Toggle Switch Code

#HTML Toggle Switch Code

#Pure CSS Switch Button

#Blue Switch Code


<!-- This script got from www.frontendfreecode.com -->
<div class="radio_button"> <input type="checkbox" id="switch12"> <label class="switch_label" for="switch12"></label>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee
}
.radio_button input[type="checkbox"] {
    width: 0;
    height: 0;
    visibility: hidden
}
.radio_button .switch_label {
    width: 150px !important;
    height: 50px !important;
    background-color: #03256C !important;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s
}
.radio_button label::after {
    content: "";
    position: absolute;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    top: 3px;
    left: 4px;
    background-color: #2541B2;
    transition: all 1s
}
.radio_button input:checked+label:after {
    left: calc(100% - 48px)
}
.radio_button label:active::after {
    width: 80px
}
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js'></script>
<style>
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee
}
.radio_button input[type="checkbox"] {
    width: 0;
    height: 0;
    visibility: hidden
}
.radio_button .switch_label {
    width: 150px !important;
    height: 50px !important;
    background-color: #03256C !important;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s
}
.radio_button label::after {
    content: "";
    position: absolute;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    top: 3px;
    left: 4px;
    background-color: #2541B2;
    transition: all 1s
}
.radio_button input:checked+label:after {
    left: calc(100% - 48px)
}
.radio_button label:active::after {
    width: 80px
}
</style>

</head>
<body>
<div class="radio_button"> <input type="checkbox" id="switch12"> <label class="switch_label" for="switch12"></label>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview