How to Install Demo and Download Button Flat UI

In today's tutorial * GoWidget * will share the tutorial How to Make Button Demo and Download Flat UI with additional icon Font Awesome. For the friend who had given something via blog both share a template, software, movies, and anything else that canshared will certainly require a button and download the demo.

Display button and download the demo that I share this very interesting, because there are Font Awesome icon on the button: Okay without the need for long, just follow the steps pal below this.

How to Install Button Demo and Download Flat UI

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

The following key demos Demos and Downloads which I made with 2 style choice

* Style 1 *

* Style 2 *

1. Go to Blogger >>Template >> Edit HTML

2. Make sure there is a script in your blog caller font style css awesome like this which is located above the </ head>. If no, please Put caller CSS style script font awesome in

Below the above code </ head>.

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

* Style 1 *

/* CSS Button Style 1 */

.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'}

* Style 2 *

/* CSS Button Style 2 */

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.button2 ul{margin:0;padding:0}

.button2 li{display:inline;margin:5px;padding:0;list-style:none}

.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}

.button2 li a.download{background:#3498db}

.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}

.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}

.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s}

.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

4. Save the template.

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

* Style 1 *

<li><a class="download" href="http://www. yourblog-name.com" target="_blank">Download</a></li>

</ul>

</div>

* Style 2 *

<li><a class="download" href="http://www. yourblog-name.com" target="_blank">Download Link</a></li>

</ul>

</div>