Awesome Css3 button collection for your blog.
Check all buttons from bloggertrix.com
CSS3 buttons collection
Check all buttons from bloggertrix.com
CSS3 buttons collection
CSS3 BUtton Hover Effects COllaection
1. Go to Blogger Dashboard > Template2. Find ]]></b:skin>
3. Paste below code just below it.
/*== Button hover css ==*/
button{border: 0; font-family: "Open Sans"; font-weight: 600; padding: 8px 12px; width: 120px; color: #fff; border-radius: 5px; background-color: #DB733B; cursor: pointer; position: relative; z-index: 1;}
.b1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b1:hover:before{height: 100%; bottom: auto; top: 0;}
.b2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b2:hover:before{height: 100%; top: auto; bottom: 0;}
.b3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b3:hover:before{width: 100%; right: auto; left: 0;}
.b4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b4:hover:before{width: 100%; left: auto; right: 0;}
.b5:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.b5:hover:before{width: 100%; height: 100%; right: auto; left: 0; bottom: auto; top: 0;}
.b6:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b6:hover:before{width: 100%; height: 100%; left: auto; right: 0; top: auto; bottom: 0;}
.b7:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 50%; bottom: 50%; transition:.4s; z-index: -1;}
.b7:hover:before{width: 100%; height: 100%; left: 0; bottom: 0;}
.b8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b8:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b8:hover:before, .b8:hover:after{width: 50%;}
.b9:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 50%; top: 0; transition:.3s; z-index: -1;}
.b9:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 50%; top: 0; transition:.3s; z-index: -1;}
.b9:hover:before, .b9:hover:after{width: 50%;}
.b9:hover:before{left: 0;}
.b9:hover:after{right: 0;}
.b10:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b10:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.b10:hover:before, .b10:hover:after{width: 50%; height: 100%;}
.b11:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b11:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b11:hover:before, .b11:hover:after{width: 50%; height: 100%;}
.b12:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b12:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b12:hover:before, .b12:hover:after{height: 50%;}
.b13:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 50%; transition:.3s; z-index: -1;}
.b13:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 50%; transition:.3s; z-index: -1;}
.b13:hover:before, .b13:hover:after{height: 50%;}
.b13:hover:before{bottom: 0;}
.b13:hover:after{top: 0;}
/*= button hover with text =*/
.withText button{height: 39px; overflow: hidden;}
button span{display: block; position: relative; transition:.35s;}
.bt1 .after{top: -45px;}
.bt1 .before{top: 0;}
.bt1:hover .before{top: 45px;}
.bt1:hover .after{top: -18px;}
.bt1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.bt1:hover:before{height: 100%;}
.bt2 .after{bottom: -10px;}
.bt2 .before{bottom: 0;}
.bt2:hover .before{bottom: 45px;}
.bt2:hover .after{bottom: 18px;}
.bt2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt2:hover:before{height: 100%;}
.bt3 .after{left: -90px; top: -18px;}
.bt3 .before{right: 0;}
.bt3:hover .before{right: -90px;}
.bt3:hover .after{left: 0;}
.bt3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt3:hover:before{width: 100%;}
.bt4 .after{right: -90px; top: -18px;}
.bt4 .before{left: 0;}
.bt4:hover .before{left: -90px;}
.bt4:hover .after{right: 0;}
.bt4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt4:hover:before{width: 100%;}
.bt5 .after{top: -45px; z-index: 9;}
.bt5 .before{top: 0;}
.bt5:hover .before{top: -45px;}
.bt5:hover .after{top: -18px;}
.bt5:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: 1;}
.bt5:hover:before{height: 100%;}
.bt6 .after{bottom: -10px; z-index: 9;}
.bt6 .before{bottom: 0;}
.bt6:hover .before{bottom: -45px;}
.bt6:hover .after{bottom: 18px;}
.bt6:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt6:hover:before{height: 100%;}
.bt7 .after{left: -90px; top: -18px; z-index: 9;}
.bt7 .before{right: 0;}
.bt7:hover .before{right: 90px;}
.bt7:hover .after{left: 0;}
.bt7:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt7:hover:before{width: 100%;}
.bt8 .after{right: -90px; top: -18px; z-index: 9;}
.bt8 .before{left: 0;}
.bt8:hover .before{left: 90px;}
.bt8:hover .after{right: 0;}
.bt8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt8:hover:before{width: 100%;}
.bt9 .after{top: -45px;}
.bt9 .before{top: 0;}
.bt9:hover .before{top: 45px;}
.bt9:hover .after{top: -18px;}
.bt9:hover{background-color: #3395D0; transition:.4s;}
.bt10 .after{bottom: -10px;}
.bt10 .before{bottom: 0;}
.bt10:hover .before{bottom: 45px;}
.bt10:hover .after{bottom: 18px;}
.bt10:hover{background-color: #3395D0; transition:.4s;}
.bt11 .after{left: -90px; top: -18px;}
.bt11 .before{right: 0;}
.bt11:hover .before{right: -90px;}
.bt11:hover .after{left: 0;}
.bt11:hover{background-color: #3395D0; transition:.4s;}
.bt12 .after{right: -90px; top: -18px;}
.bt12 .before{left: 0;}
.bt12:hover .before{left: -90px;}
.bt12:hover .after{right: 0;}
.bt12:hover{background-color: #3395D0; transition:.4s;}
.bt13 .after{top: -45px; z-index: 9;}
.bt13 .before{top: 0;}
.bt13:hover .before{top: -45px;}
.bt13:hover .after{top: -18px;}
.bt13:hover{background-color: #3395D0; transition:.4s;}
.bt14 .after{bottom: -10px; z-index: 9;}
.bt14 .before{bottom: 0;}
.bt14:hover .before{bottom: -45px;}
.bt14:hover .after{bottom: 18px;}
.bt14:hover{background-color: #3395D0; transition:.4s;}
.bt15 .after{left: -90px; top: -18px; z-index: 9;}
.bt15 .before{right: 0;}
.bt15:hover .before{right: 90px;}
.bt15:hover .after{left: 0;}
.bt15:hover{background-color: #3395D0; transition:.4s;}
.bt16 .after{right: -90px; top: -18px; z-index: 9;}
.bt16 .before{left: 0;}
.bt16:hover .before{left: 90px;}
.bt16:hover .after{right: 0;}
.bt16:hover{background-color: #3395D0; transition:.4s;}
/*== Button hover css end ==*/
4. Now save your Template and get HTML Codes from below link
HTML Codes for every CSS3 buttons
Now get your HTML code from below link for each buttons.
credits: http://tympanus.net/codrops/
Thanks for sharing nice widget of menu bar.
ReplyDeleteRegards
Blogging Sprout
nice article thanks for sharing with us.
ReplyDeleteThanks Bro !!!!
ReplyDeleteluat hoc Thanks for sharing
ReplyDeletehow to fix this issues on blog, help me please
ReplyDeletehttp://khmermediasource.blogspot.com/
Very nice buttons. Now I am going to give these a try on my blog Tricksfeed
ReplyDeleteCodrops explicitly prohibits direct linking to their demo files but that’s what you did and the demo link only links to this page, not theirs.
ReplyDeletegreat thanks for write
ReplyDeletehttp://tricksyear.com
this is very nice post thanks for sharing.
ReplyDeleteHii Sir,
ReplyDeleteThank you for sharing this nice widget of menu bar...I customize this code in my work...I really like this.
Hey,
ReplyDeleteThank you for sharing this blog. I will use this and I hope it will give effective results to me.
Very nice collection :-)
ReplyDeleteHii,
ReplyDeleteThanks for sharing your knowledge. I hope this will work for me.:)
The article was very good and i am trying the tips and tricks from this website . the information is very helpful. Thank you very much. keep posting.
ReplyDeleteHii,
ReplyDeleteThank you for sharing this nice code...
This information is very easy code in css.
Hii,
ReplyDeleteThank you for sharing this nice CSS sode for menu.Your code is nice and easy to understand.
Hii,
ReplyDeleteThank you for sharing this nice blog...
This CSS code is nice and simple...
Hii ,
ReplyDeleteThank you for sharing this nice article...
It is nice code and easy to understand.
Hello,
ReplyDeleteYou have shared great information on CSS3. Thanks for this wonderful information.
thank you...
DeleteVery nice articles. Nice buttons with good hover effects.
ReplyDeleteHi,
ReplyDeleteThanks for sharing this post. You shared the very helpful code for hovering effects.