Beautiful Demo and Download Button Using HTML and CSS

Hey friends today in this article we are going to learn how to add beautiful Demo and Download button in your blog posts or anywhere you want in your site.

You can use this method to add Demo and Download button in your Blogger, WordPress or any other site. If your site offer visitors to download anything or you need to show a demo link to your visitors then you can use these beautiful buttons in your site. Both of the button are beautiful and has a nice hover effect.

I used very simple CSS and HTML code to make the buttons. Anyone can easily edit and customize the buttons.
Beautiful Demo and Download Button for Blogger and WordPress
Guys below I will show you step by step tutorial to add the buttons in your Blogger or WordPress site. Just follow my instructions below.

Beautiful Demo and Download Button For Blogger and WordPress:

In this tutorial I will give you stylish CSS code and HTML code to add Demo and Download button in your site. At first I will show you tutorial for Blogger and then tutorial for WordPress.
Read: How To Add Code Box into Blogger Post

How To Add Demo and Download Button in Blogger:

Follow below steps to add the buttons in your Blogger blog. I tried to make the tutorial as easy as I can, so I added screenshots to help you understand the tutorial easily.

Step1: Add Demo and Download Button Css Code into Blogger:

At first we need to add Css code to make the Demo and Download button look beautiful. We need to add the Css style code in our Blogger Blog’s Template.

  1. Login to your Blogger Blog >> Theme >> Edit HTML >> .
    Edit HTML Blogger
  2. Then press (CTRL+F) on your keyboard. It will open a Search box. Now Search for ]]></b:skin> . Then paste the following Css code above the ]]></b:skin> tag.
    .tipdeo{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both; margin-bottom:15px;}
    .tipdeo ul{margin:0;padding:0}
    .tipdeo li{display:inline; margin:5px;padding:0;list-style:none}
    .tipdeo li a.demo,.tipdeo 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}
    .tipdeo li a.download{background:#3498db}
    .tipdeo li a.demo:hover,.tipdeo li a.download:hover{background:#666}
    .tipdeo li a.demo:active,.tipdeo li a.download:active{cursor:pointer}
    .tipdeo li a.demo:after,.tipdeo li a.download:after{content:'↗️';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}
    .tipdeo li a.download:after{content:'↓'}
    

Guys we are almost done. We have successfully added the Css Style Code. Now we need to use an HTML tag to show the Demo and Download Button on Blogger Posts.

Step2: How To Show Demo and Download Button in Blogger:

Use the below HTML Code to show Demo and Download Button in Blogger.

<div style="text-align: center;">
  <ul class="tipdeo">
  
    <li><a class="demo" href="###" rel="nofollow">Demo</a></li>
    
    <li><a class="download" href="###" rel="nofollow">Download</a></li>
    
  </ul>
</div>

Note: Replace ### with your Demo and Download Link.

How To Add Demo and Download Button in WordPress:

Adding Demo and Download button in WordPress is very easy. You need to complete some easy steps.

Read: 6 Things to Do Before Applying for Adsense.

Step1: Add Demo and Download Button Css Code in WordPress:

  1. At first login your WordPress Admin Panel.
  2. Then click on Add New Plugin
  3. Now Install and Activate the Insert Headers and Footers Plugin.
    Insert Headers and Footers Plugin
  4. Then click on Settings >> Insert Headers and Footers.
    Insert Headers and Footers Plugin
  5. Now Paste the below Css Code into the Plugins Footer section.
    Note: Make sure to use <style> Css Code Here </style> tag. You can see the example below.
    Insert Headers and Footers WordPress

    .tipdeo{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both; margin-bottom:15px;}
    .tipdeo ul{margin:0;padding:0}
    .tipdeo li{display:inline; margin:5px;padding:0;list-style:none}
    .tipdeo li a.demo,.tipdeo 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}
    .tipdeo li a.download{background:#3498db}
    .tipdeo li a.demo:hover,.tipdeo li a.download:hover{background:#666}
    .tipdeo li a.demo:active,.tipdeo li a.download:active{cursor:pointer}
    .tipdeo li a.demo:after,.tipdeo li a.download:after{content:'↗️';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}
    .tipdeo li a.download:after{content:'↓'}
    

We have successfully added the Demo and Download button Css Code into our WordPress site. Now we need to use some HTML tag to show the Demo and Download button in our WordPress site.

Step2: How To Show Demo and Download Button in WordPress:

Use the following codes to show Demo and Download button in WordPress.

<div style="text-align: center;">
  <ul class="tipdeo">
  
    <li><a class="demo" href="###" rel="nofollow">Demo</a></li>
    
    <li><a class="download" href="###" rel="nofollow">Download</a></li>
    
  </ul>
</div>

Note: Replace ### with your Demo and Download Link.

Congratulations. You successfully added Demo and Download button into your Blogger and WordPress site. Now You can add Demo button and Download button anywhere of your site.
You can show Demo and Download button into your Blogger posts and also into your WordPress posts.
Hope you enjoyed my article. If you have any questions or if you need help doing the steps avobe, then comment below. I try my best to assist you.

..:: More Posts For You ::..

Leave a Reply

Back to top button