Bootstrap Toggle Switches:

Bootstrap Toggle Switch On/Off Style

You maybe have seen on/off switches on many websites and like them so much. You can use this feature to attract new people and interest older audiences if you own a website. The Bootstrap Toggle Switch On/Off Style is presented in this post with a great performance. This HTML Toggle Switch is so functional, and you can use it to display different items easily. To improve your website in a short time, you can use this code and gain many visitors. The following HTML Toggle Switch Button lets you add yes/no questions to your website.

There is a preview of this code below that you can look at. This code has a simple black theme. So, it fits all kinds of simple websites. It has a rectangle shape, and the off button is gray. The writing “OFF” is written on the right side of the CSS Toggle Switch Effect. On the other hand, you can see a green color on the left side as you click on the button. There is a text “ON” on this part. This Free Toggle Switch On Off Theme is available on this post, and you can download and apply it on your website.

HTML Toggle Switch

CSS Toggle Switch Effect

Free Toggle Switch On Off Theme

HTML Toggle Switch Button

<!-- This script got from frontendfreecode.com -->
<div class="padding">
    <div class="switch demo3"> <input type="checkbox"> <label><i></i></label> </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://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.demo3 {
    width: 180px;
    height: 50px
}
.switch.demo3 label {
    display: block;
    width: 100%;
    height: 100%;
    background: #a5a39d;
    box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.5)
}
.switch.demo3 label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border-radius: inherit;
    background: #ababab;
    background: -moz-linear-gradient(#f2f2f2, #ababab);
    background: -ms-linear-gradient(#f2f2f2, #ababab);
    background: -o-linear-gradient(#f2f2f2, #ababab);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
    background: -webkit-linear-gradient(#f2f2f2, #ababab);
    background: linear-gradient(#f2f2f2, #ababab);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25)
}
.switch.demo3 label i {
    display: block;
    height: 100%;
    width: 60%;
    border-radius: inherit;
    background: silver;
    position: absolute;
    z-index: 2;
    right: 40%;
    top: 0;
    background: #b2ac9e;
    background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
    background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
    background: -o-linear-gradient(#f7f2f6, #b2ac9e);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
    background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
    background: linear-gradient(#f7f2f6, #b2ac9e);
    box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0, 0, 0, 0.3), 0 5px 5px rgba(0, 0, 0, 0.2)
}
.switch.demo3 label i:after {
    content: "";
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3;
    background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
    background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
    background: -o-linear-gradient(#cbc7bc, #d2cbc3);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
    background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
    background: linear-gradient(#cbc7bc, #d2cbc3);
    border-radius: inherit
}
.switch.demo3 label i:before {
    content: "off";
    text-transform: uppercase;
    font-style: normal;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: -50%
}
.switch.demo3 input:checked~label {
    background: #9abb82
}
.switch.demo3 input:checked~label i {
    right: -1%
}
.switch.demo3 input:checked~label i:before {
    content: "on";
    right: 115%;
    color: #82a06a;
    text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659
}

<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js'></script>
<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>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js'></script>
<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>
<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.demo3 {
    width: 180px;
    height: 50px
}
.switch.demo3 label {
    display: block;
    width: 100%;
    height: 100%;
    background: #a5a39d;
    box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.5)
}
.switch.demo3 label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border-radius: inherit;
    background: #ababab;
    background: -moz-linear-gradient(#f2f2f2, #ababab);
    background: -ms-linear-gradient(#f2f2f2, #ababab);
    background: -o-linear-gradient(#f2f2f2, #ababab);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
    background: -webkit-linear-gradient(#f2f2f2, #ababab);
    background: linear-gradient(#f2f2f2, #ababab);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25)
}
.switch.demo3 label i {
    display: block;
    height: 100%;
    width: 60%;
    border-radius: inherit;
    background: silver;
    position: absolute;
    z-index: 2;
    right: 40%;
    top: 0;
    background: #b2ac9e;
    background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
    background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
    background: -o-linear-gradient(#f7f2f6, #b2ac9e);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
    background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
    background: linear-gradient(#f7f2f6, #b2ac9e);
    box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0, 0, 0, 0.3), 0 5px 5px rgba(0, 0, 0, 0.2)
}
.switch.demo3 label i:after {
    content: "";
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3;
    background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
    background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
    background: -o-linear-gradient(#cbc7bc, #d2cbc3);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
    background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
    background: linear-gradient(#cbc7bc, #d2cbc3);
    border-radius: inherit
}
.switch.demo3 label i:before {
    content: "off";
    text-transform: uppercase;
    font-style: normal;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: -50%
}
.switch.demo3 input:checked~label {
    background: #9abb82
}
.switch.demo3 input:checked~label i {
    right: -1%
}
.switch.demo3 input:checked~label i:before {
    content: "on";
    right: 115%;
    color: #82a06a;
    text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659
}
</style>

</head>
<body>
<div class="padding">
    <div class="switch demo3"> <input type="checkbox"> <label><i></i></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

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