content logo

Bootstrap Toggle Switches:

Bootstrap Switch Radio Buttons with Selection Limit

Using interconnected switches can help us avoid using radio buttons. These switches, in addition to being connected and selected by one of them, are deactivated, the others also have a color change effect. The rolling circle on each switch turns yellow when that switch is selected.

#Free Switch Button Code

#HTML Toggle Radio Button

#Limited Selection Toggle Switch

#Pure CSS Switch Button


<!-- This script got from www.frontendfreecode.com -->
<div class="d-flex justify-content-center mt-5 align-items-center">
    <section id="first" class="section">
        <div class="radio-container"> <input type="radio" name="group1" id="radio-1"> <label for="radio-1"><span class="radio">Coffee</span></label> </div>
        <div class="radio-container"> <input type="radio" name="group1" id="radio-2"> <label for="radio-2"><span class="radio">Tea</span></label> </div>
        <div class="radio-container"> <input type="radio" name="group1" id="radio-3"> <label for="radio-3"><span class="radio">Cappuccino</span></label> </div>
    </section>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background: #eee
}
.section {
    padding: 100px;
    padding-left: 150px
}
.section input[type="radio"],
.section input[type="checkbox"] {
    display: none
}
.radio-container {
    margin-bottom: 10px
}
.radio-container label {
    position: relative
}
.radio-container span::before,
.radio-container span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto
}
.radio-container span.radio:hover {
    cursor: pointer
}
.radio-container span.radio::before {
    left: -52px;
    width: 45px;
    height: 25px;
    background-color: #A8AAC1;
    border-radius: 50px
}
.radio-container span.radio::after {
    left: -49px;
    width: 17px;
    height: 17px;
    border-radius: 10px;
    background-color: #6C788A;
    transition: left .25s, background-color .25s
}
input[type="radio"]:checked+label span.radio::after {
    left: -27px;
    background-color: #EBFF43
}
.radio-container span.checkbox::before {
    width: 27px;
    height: 27px;
    background-color: #fff;
    left: -35px;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition: border-color .2s
}
.radio-container span.checkbox:hover::before {
    border: 3px solid #F0FF76
}
.radio-container span.checkbox::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    left: -31px;
    top: 2px;
    color: transparent;
    transition: color .2s
}
input[type="checkbox"]:checked+label span.checkbox::after {
    color: #62AFFF
}
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/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.0-alpha1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>
<style>
body {
    background: #eee
}
.section {
    padding: 100px;
    padding-left: 150px
}
.section input[type="radio"],
.section input[type="checkbox"] {
    display: none
}
.radio-container {
    margin-bottom: 10px
}
.radio-container label {
    position: relative
}
.radio-container span::before,
.radio-container span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto
}
.radio-container span.radio:hover {
    cursor: pointer
}
.radio-container span.radio::before {
    left: -52px;
    width: 45px;
    height: 25px;
    background-color: #A8AAC1;
    border-radius: 50px
}
.radio-container span.radio::after {
    left: -49px;
    width: 17px;
    height: 17px;
    border-radius: 10px;
    background-color: #6C788A;
    transition: left .25s, background-color .25s
}
input[type="radio"]:checked+label span.radio::after {
    left: -27px;
    background-color: #EBFF43
}
.radio-container span.checkbox::before {
    width: 27px;
    height: 27px;
    background-color: #fff;
    left: -35px;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition: border-color .2s
}
.radio-container span.checkbox:hover::before {
    border: 3px solid #F0FF76
}
.radio-container span.checkbox::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    left: -31px;
    top: 2px;
    color: transparent;
    transition: color .2s
}
input[type="checkbox"]:checked+label span.checkbox::after {
    color: #62AFFF
}
</style>

</head>
<body>
<div class="d-flex justify-content-center mt-5 align-items-center">
    <section id="first" class="section">
        <div class="radio-container"> <input type="radio" name="group1" id="radio-1"> <label for="radio-1"><span class="radio">Coffee</span></label> </div>
        <div class="radio-container"> <input type="radio" name="group1" id="radio-2"> <label for="radio-2"><span class="radio">Tea</span></label> </div>
        <div class="radio-container"> <input type="radio" name="group1" id="radio-3"> <label for="radio-3"><span class="radio">Cappuccino</span></label> </div>
    </section>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview