How to Make a Demo Button and Download Flat UI

How to Make a Demo Button and Download Flat UI - In the fourth tutorial today Wiendhy Wiana will share a tutorial on How to Make a Demo Button and Download Flat UI in addition to the Font Awesome icon. For those of you who used to share something through blogs either sharing templates, software, movies, and anything else that could be shared would certainly require demo and download buttons.



The display of the demo button and the download that I shared is very interesting, because there is a Font Awesome icon on the button:

Okay without having to linger, just follow the steps below.

How to Make a Demo Button and Download Flat UI

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

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

The following is the demo button and download button that I have made with 2 style choices

Style 1

See the Pen Demo button and Flat UI Style 1 download by Wiendhy (@wiana) on CodePen.

Style 2

See the Pen Demo UI and Flat UI Style 2 Button by Wiendhy (@wiana) on CodePen.

1. Enter Blogger> Template> Edit HTML

2. Make sure on your blog there is an awesome css style font caller script as below which is located above the code </head>. If it's not there, please place the awesome CSS font style caller script below below the code </head>.

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

Style 1

/* CSS Button Style 1 by Wiendhy */
.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 1

/* CSS Button Style 2 by Wiendhy */
.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. For use, please use the following code when posting (Add in the HTML tab)

Style 1

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://stressthinking.blogspot.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://stressthinking.blogspot.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Style 2

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://stressthinking.blogspot.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://stressthinking.blogspot.com" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

Replace http://stressthinking.blogspot.com with the destination link

That is the tutorial on How to Make a Demo Button and Download Flat UI. Hopefully this tutorial is useful.