Header Ads

  • Breaking News

    How To Add Beautiful Flat UI Buttons in Blogger

    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.

    Step 1. Installation

    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML and Search For </head>
    • Paste The Following Code Above </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;}

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

    No comments

    Post Top Ad

    Post Bottom Ad