Bootstrap Toggle Switches:

Bootstrap Switch Radio Buttons with Selection Limit

If you like to use a switch button on your website, carefully pay attention to this post. These kinds of controls are so common nowadays, and most websites’ administrations use them to be more successful. We have prepared the Bootstrap Switch Radio Buttons with Selection Limit in this post with a different design. The Free Switch Button Code allows the website’s owners to add some features to their pages easily. In addition to its functionality, this HTML Toggle Radio Button has a great design that attracts anyone’s attention.

As the below preview represents, this Pure CSS Switch Button has a simple theme that lets you use it on various websites. As you see from the preview, this code has a gray background with three sections. These are limited selections; It means that you can choose only one, and if you want to select the other part, the previous one turns off. By looking at this Limited Selection Toggle Switch, you can understand that the unselected sections are gray, and as soon as you click on an option, its little circle moves slowly and changes to red. Once you select the second option, the first one will turn gray.

Free Switch Button Code

HTML Toggle Radio Button

Limited Selection Toggle Switch

Pure CSS Switch Button

<!-- This script got from 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://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 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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS