How To Add Beautiful Stylish Flat Label Buttons in Blogger

PUT YOUR PARSED ADSENSE CODE HERE

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.itsimtiazblog.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;}
.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.itsimtiazblog.blogspot.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!

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!