Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
First of all you can also use these buttons on your html documents ..... just wanted to let you know :).....so all blogger right now i'am gonna tell you how to use these button on your blog and these are animated so have fun.....
- Go To Blogger > Template > Edit HTML
- Find ]]></b:skin> in your template
- Post the following CSS Code just above ]]></b:skin> :
.button{
font:15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Applying a default border raidus of 8px */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* A 1px highlight inside of the button */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
/* Moving the button 1px to the bottom when clicked */
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important; background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important; background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important; background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK1e5m5PXAtXKW7ssI6Hnt6MmdyuzwVyVhgeeHMPeNnhuWXjA4SeNVN9k77GxXUeQB_LZO65UqNWBEcnVbVfKBIeqrTMsJIcQKKqvjFD3hOHx5AP3KI6dGv5aOxhFqQNvWYyx-6ZMtqw/s320/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
- Save Your Template : )
How To Use These Button :
- While editing post click on Edit HTML tab
- Choose your button code below and paste it
- Replace links and link names with yours,
1. HTML Code Large Buttons :
2. HTML Code Medium Buttons :<a href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>
<a href="#" class="button blue medium">Medium Button</a>3. HTML Code Small Buttons :
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>
<a href="#" class="button small blue">Small Button</a>4. HTML Code Round Buttons :
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
<a href="#" class="button big green rounded">Rounded</a>
<a href="#" class="button small blue rounded">Rounded</a>
- Replace # with link URL
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
