Beautiful Flat UI On Blogger

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

On my prior tutorial about How To Create Cool 404 Error Page On Your Blog, today i will share about Flat UI. Design beautiful buttons which may help you to bring awesomeness to be able to the the blog design. This types of buttons have different colors and also sizes that may let you employ them for all suitable situations and places. You will discover three sizes with regard to these buttons that are: big, medium, and also small. Overall there are 5 Flat UI colors pertaining to most of this buttons (Blue, Green, Red, Purple, Sea Green). Actually, these are generally not exact anyone colors pointed out about, but probably call them above colors throughout common, because the mostly theymatch each others. The buttons are coded with the type of way and they will not affect to the loading speed of any blogsite cause it has been written by short code, compressed the item as well as lone considered CSS3 without an images. Another thing about these types of buttons.. it can be and certainly work perfectly at almost all of browser.

Implementing these kind of buttons throughout the blogsite is actually absolutely no tough task but you colud fill them through the blog with ones simplke steps below.

How To Add Beautiful Flat UI Buttons On Blogger

Beautiful Flat UI [own images]

Let's start it:

Step 1: Login to your blogger panel admin

Step 2: Click On Template » Edit HTML

Step 3: Add this code just above the code </head>

<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>

Step 4: Save Your Template.

Step 5: Then add the following HTML Code anywere you want to use it.

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>

Step 6: Last step and save it, see the results and good luck.

That's a little explanation about on how to Add Beautiful Flat UI On Blogger , i hope this article can help you, also look forward for my next tutorial, see you.

Big Size Buttons

Medium Size Buttons