Recommended : How To Add Push Buttons in Blogger
Beautiful Flat UI Buttons - Review
These are Flat UI design beautiful buttons which will help you to bring awesomeness to your blog design. These buttons have different colors and sizes which will help you to use them for most appropriate situations and places. There are three sizes for these buttons which are big, medium and small. We've chosen total five Flat UI colors for these buttons which are Blue, Green, Red, Purple and Sea Green. Actually, These are not exact those colors mentioned above but we can call them above colors in common because mostly they match with each other. We've coded these buttons in such way that they will not affect on the loading speed of your blog because we've written short coding, compressed it and only used CSS3 without images. Another thing about these buttons is that they will work perfectly on all browsers because we've tweaked them for every browser. Click the below button to see it's live demo.
How To Add Beautiful Flat UI Buttons in Blogger?
Implementing these buttons in our blog is not any difficult job but anyone can easily add them in his blog by following the simple steps given below. So, let's start the first step by installing these buttons in our blogs.
Step 1. Installation
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML and Search For </head>
- Paste The Following Code Above </head>
<!-- Flat UI Buttons By Www.BloggerYard.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;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!-- Flat UI Buttons By Www.BloggerYard.Com End -->
- Click "Save Template".
- Installation Completed!
Step 2. Adding Flat UI Buttons in Blogger
You can use these Flat UI buttons anywhere in your blog. For that, you just need to copy the any button code and paste it anywhere you want to use it. Below, I'm going to give you button codes and also going to show you that how can we use them in a post.
- Go To Blogger >> Create New Post
- Click "HTML" Tab
- Copy and Paste Any Button Code There.
Big Size Buttons
<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 purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>
Medium Size Buttons
<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen</a>
Small Size 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 purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>
- Replace # With The Link of Button.
- Replace Highlighted Text With The Text You Want to Show On That Button.
- Prepare Post Content and Publish.
- That's All.
Final Words
These were beautiful Flat UI Buttons for Blogger which I liked to share today with you all and I hope this little effort in preparing these buttons will help everyone to stylify their blogs. Facing any problem in implementing these buttons? Feel free to ask below. Keep in touch with us for the upcoming hot dish which is being prepared in our kitchen and also share these buttons with your friends. Take Care!
