content logo

Bootstrap Toggle Switches:

Vertical Toggle Switch using Bootstrap

You can make your website different by using switches that are different from the normal solution, and the forms in which you want to get information from the user are more accurate. In this post, we have prepared one of these toggle switches for you. These toggle switches are vertical. By selecting one of these switches, the switch changes color from red to green. This color change effect can help the user make better choices.

#Free CSS Toggle Switch

#Toggle Switch On Off Style

#HTML Switch Button Effect

#Vertical Toggle Switch Code


<!-- This script got from www.frontendfreecode.com -->
<div class="padding">
    <div class="switch demo2"> <input type="checkbox"> <label></label> </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background-color: #000
}
.padding {
    padding:2rem 10rem !important
}
.switch {
    margin: 50px auto;
    position: relative
}
.switch label {
    width: 100%;
    height: 100%;
    position: relative;
    display: block
}
.switch input {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer
}
.switch.demo2 {
    width: 50px;
    height: 100px
}
.switch.demo2 label {
    background: #B71C1C;
    margin: 0 auto;
    border-radius: 0px;
    box-shadow: inset 0 1px 0 #b72925, 0 0 0 1px #999, 0 0 5px 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgb(221, 221, 221), inset 0 10px 1px #b72925, inset 0 11px 0 rgb(183, 41, 37), inset 0 -45px 3px #ddd
}
.switch.demo2 label:after {
    content: "";
    position: absolute;
    top: -20px;
    left: -25px;
    bottom: -20px;
    right: -25px;
    background: #ccc;
    background: -moz-linear-gradient(#ddd, #bbb);
    background: -ms-linear-gradient(#ddd, #bbb);
    background: -o-linear-gradient(#ddd, #bbb);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#bbb));
    background: -webkit-linear-gradient(#ddd, #bbb);
    background: linear-gradient(#ddd, #bbb);
    z-index: -1;
    border-radius: 5px;
    border: 1px solid #bbb;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5)
}
.switch.demo2 label:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #666;
    top: -13px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 120px 0 #666, 0 1px 0 white, 0 121px 0 white
}
.switch.demo2 input:checked~label {
    background: #4CAF50;
    box-shadow: inset 0 1px 0 white, 0 0 0 1px #50af50, 0 0 0px 1px rgb(80, 175, 80), inset 0 -10px 0 #00C853, 0 2px 0 rgb(80, 175, 80), inset 0 45px 3px #e0e0E0, 0 16px 6px rgba(0, 0, 0, 0.18)
}
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js'></script>
<style>
body {
    background-color: #000
}
.padding {
    padding:2rem 10rem !important
}
.switch {
    margin: 50px auto;
    position: relative
}
.switch label {
    width: 100%;
    height: 100%;
    position: relative;
    display: block
}
.switch input {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer
}
.switch.demo2 {
    width: 50px;
    height: 100px
}
.switch.demo2 label {
    background: #B71C1C;
    margin: 0 auto;
    border-radius: 0px;
    box-shadow: inset 0 1px 0 #b72925, 0 0 0 1px #999, 0 0 5px 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgb(221, 221, 221), inset 0 10px 1px #b72925, inset 0 11px 0 rgb(183, 41, 37), inset 0 -45px 3px #ddd
}
.switch.demo2 label:after {
    content: "";
    position: absolute;
    top: -20px;
    left: -25px;
    bottom: -20px;
    right: -25px;
    background: #ccc;
    background: -moz-linear-gradient(#ddd, #bbb);
    background: -ms-linear-gradient(#ddd, #bbb);
    background: -o-linear-gradient(#ddd, #bbb);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#bbb));
    background: -webkit-linear-gradient(#ddd, #bbb);
    background: linear-gradient(#ddd, #bbb);
    z-index: -1;
    border-radius: 5px;
    border: 1px solid #bbb;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5)
}
.switch.demo2 label:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #666;
    top: -13px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 120px 0 #666, 0 1px 0 white, 0 121px 0 white
}
.switch.demo2 input:checked~label {
    background: #4CAF50;
    box-shadow: inset 0 1px 0 white, 0 0 0 1px #50af50, 0 0 0px 1px rgb(80, 175, 80), inset 0 -10px 0 #00C853, 0 2px 0 rgb(80, 175, 80), inset 0 45px 3px #e0e0E0, 0 16px 6px rgba(0, 0, 0, 0.18)
}
</style>

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

</body>
</html>
Preview