HOW TO MAKE FLAT UI DEMO AND DOWNLOAD BUTTON

How to Add  Demo and Download Button in Blogger - In today's tutorial You See How to Make Flat UI Demo and Download Button with additional Font Awesome icon .

For the friend who had given something through either blogs that share templates, software, movies, and anything else that can be shared will certainly require a button and download the demo.

HOW TO MAKE FLAT UI DEMO AND DOWNLOAD BUTTON

Display download and demo button that I share this very interesting, because there are Font Awesome icon on the button:

Okay without the need for long, just buddies follow the steps below

How to Make Flat UI Demo and Download Button

This widget uses Font Awesome , so please add the following CSS link above </head>

HTML

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Entered into Blogger > Template > Edit HTML

2. Make sure your blogger there caller script style font awesome CSS like this which is located above the </head>. 

If no, please Put caller CSS style script font awesome below the above code </head>. 

3. Place the CSS code below the above code]]></ b:skin> or </style>

CSS

/* CSS Button Style 1 by www.arlinadzgn.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

4. Save the template. 

5. To use, please use the following code when making a post (Add in the HTML tab)

HTML

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="Your-Demo-Link" target="_blank">Demo</a></li>
    <li><a class="download" href="Your-download-Link" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Change Replace Highlighted Link  with Your Demo and Download Links