content logo

Bootstrap Toggle Switches:

Bootstrap Toggle Switch On/Off Style

The switch button included in this code has a slightly three-dimensional appearance. This button uses text and in the off mode, the word off is written next to the button. By selecting the button and activating it, the on phrase is written next to the button and the background of this on phrase is also green.

#HTML Toggle Switch

#CSS Toggle Switch Effect

#Free Toggle Switch On Off Theme

#HTML Toggle Switch Button


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