Animated Electric Toggle Button Widget For Blogger

VIEW DEMO

We have shared many animated button widget for blogger and this time we are coming with toggle button that is based on html and css. It is great to use in video and can also be used with checkbox also. This toggle checkbox button is the result of combining html and css without any javascript. That is why it loads faster compared to other other buttons. Here are some other professional Buttons for blogger.

Animated download buttons for video and code

Flip trick download buttons

How to optimize buttons for high click rate

It looks like plug that we use to switch on and off. This is the reason i gave it a name animated electric toggle button. Installation is also very easy. You have to copy the code and paste where you want it to appear. Some other animated widget for blogger are as follows : -

Animated image gallery for blogger

<style type="text/css">
.avdhootbutton {
position:relative;
display:inline-block;
width:40px;
height:60px;
background-color:#bbb;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
text-align:center;
}
.avdhootbutton input {
width:100%;
height:100%;
margin:0 0;
padding:0 0;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
cursor:pointer;
opacity:0;
}
.avdhootbutton label {
display:block;
position:absolute;
top:1px;
right:1px;
bottom:1px;
left:1px;
background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
-moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
box-shadow:0 2px 3px rgba(0,0,0,0.4),
inset 0 -1px 1px #888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font:normal 11px Arial,Sans-Serif;
color:#666;
text-shadow:0 1px 0 white;
cursor:text;
}
.avdhootbutton label:before {
content:attr(data-off);
position:absolute;
top:6px;
right:0;
left:0;
z-index:4;
}
.avdhootbutton label:after {
content:attr(data-on);
position:absolute;
right:0;
bottom:11px;
left:0;
color:#666;
text-shadow:0 -1px 0 #eee;
}
.avdhootbutton input:checked + label {
background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
-moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
box-shadow:0 0 1px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
}
.avdhootbutton input:checked:hover + label {
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
box-shadow:0 1px 3px rgba(0,0,0,0.4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 white;
}
.avdhootbutton input:checked + label:before {
z-index:1;
top:11px;
}
.avdhootbutton input:checked + label:after {
bottom:9px;
color:#aaa;
text-shadow:none;
z-index:4;
}
</style>
<span class="avdhootbutton">
<input type="checkbox">
<label data-off="&#10006;" data-on="&#10004;"></label>
</span>
<span class="avdhootbutton">
<input type="checkbox">
<label data-off="&#9724;" data-on="&#9654;"></label>
</span>
<span class="avdhootbutton">
<input type="checkbox">
<label data-off="Stop" data-on="Play"></label>
</span>