How To Add Beautiful Flat UI Buttons in Blogger

Beautiful Flat UI Buttons
As we all know that having a professional design of a blog is necessary these days as it gives several benefits. Bloggers and webmasters are trying to make their blog design better applying free or paid themes on their blogs and websites. The theme or design of a blog should be beautiful to look and have several features like easy interface for user, SEO friendly, Ad space ready, the colors should not affect on user's eye and many more. Previously, we've shared colorful Flat UI label cloud widget for blogger which was liked by many of our readers and they also applied that on their blogs but today, we're back with another Flat UI element or item for our blogs. Today, I'm going to share beautiful Flat UI buttons for blogger which I coded recently.
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.
Flat UI Buttons 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!