Now you can Subscribe using RSS

Submit your Email

Monday, May 4, 2015

Beautiful Flat UI On Blogger

Irvan Dev

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
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=",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;}
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

Small Size Buttons

Source: BloggerYard

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".


Post a Comment

Coprights @ 2016, Blogger Templates