- Recommended : CSS Animated Buttons With Hover Effect For Blogger
Beautiful 3D With Hover Effect Buttons
These are 3D hover effect buttons which are purely made from CSS3 and they will help you to make your blog more professional design because these buttons have different color and different sized which will help you to easily use them in anywhere of your blog. These buttons are available in three sizes which are small, medium, large. I will made this buttons using CSS language these language are using to make animation 3D objects, blogger widgets and template and ETC. so these language is very interesting for pro blogger than the other languages using of this language you can create easily your blog templates and widgets and easily make additional widget for your blog and share your ideas with your visitors. We have selected total five CSS colors for these buttons which are Blue, Orange, Red, Green and Pink. We've coded these buttons in such way that they will not affect on the blog loading speed not affect your blogger template, it just make your blog more beautiful and pro blogger blog. we've type the very short coding to make this buttons, it only build with CSS3 without any images. Another best thing of these buttons because these buttons are perfectly working with all browsers. If you can see it's demo so, click this below Live Demo buttons.
Well, after something about this Now, add this buttons in your blogger blog. It is not difficult work but anyone can easily add this buttons on their blog by following my simple steps given below. To add this buttons in blog, just follow below steps.
Part#1:-Installation
- Go To Blogger Dashboard>>Template>>Edit HTML
- Find this tag ]]></b:skin> Using (Ctrl+F)
- Paste the following code above/before ]]></b:skin>
<!--Beautiful 3D Buttons by Www.NextBloggerTricks.Blogspot.Com Start-->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.orange {background: #E9961A;border-bottom: 3px solid #A16306;}
.orange:hover {background: #AA6C0F;}
.pink {background: #DB21DF;border-bottom: 3px solid #990B9B;}
.pink:hover {background: #990B9B;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!--Beautiful 3D Buttons by Www.NextBloggerTricks.Blogspot.Com End-->
- Click On "Save Template"
- Installation Finished!
Part#2:-Insert Buttons In Post/Pages In Blogger
Where you can use this 3D buttons in your blog Posts or Pages? For that you just need to insert any button code in your blog posts and pages. I am going to shared this buttons code and also show that how add these buttons in posts or pages. Just follow below steps.
- Go To Blogger Dashboard>>Create New Pages/Posts
- Click On HTML Tab
- Insert one of them code there.
Code For Small Buttons
<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button orange small" href="#">Orange Button</a>
<a class="button pink small" href="#">Pink Button</a>
Code For Medium Buttons
<a class="button blue medium" href="#">Blue Button</a>Code For Large Buttons
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button orange medium" href="#">Orange Button</a>
<a class="button pink medium" href="#">Pink Button</a>
<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button orange big" href="#">Orange Button</a>
<a class="button pink big" href="#">Pink Button</a>
- Replace # with the link
- Replace Bold Text with the text you want to show on these button.
- Write your post with these buttons and Publish.
- That's All.
Final Words
These are beautiful 3D hover effect buttons for blogger which like to share today with you and your blog and I hope this button are really helpful for you if you're facing problem during this process so leave comments for solutions and Please like our Facebook page and also share today's tutorial with your friends on social networking websites.
Happy Blogging!
No Comment
Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.