Animated Electric Toggle Button Widget For Blogger

Animated electric toggle button widget for blogger. Based on CSS and HTML. Best to use for download buttons, video and whatever you like.

Animated Electric Toogle Button Widget For Blogger
Animated Electric Toggle Button Widget For Blogger

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.


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 : -




Installation


  • Login to blogger.
  • Go to layout.
  • Choose add a gadget.
  • Choose HTML/JAVASCRIPT.
  • Copy the below code.
  • Paste and you are done.



Complete Code



<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>


Did you enjoy this fancy animated electric toggle button widget for blogger then please share it and comment.
Next Post Previous Post