Loading...
Visit Our New Site Go To

How to Create stylish Download, Demo and Buy Button For Your Blogger Blog

In this article I will tell you to install a stylish and responsive demo, buy and download button. So, Let's check out what I have here for you.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

    Short Talk

    Are you looking for a code by which you can add stylish demo, buy and download buttons to your blogger blog? If you were having trouble finding this, then you have come to the right place. In this article I will tell you How to Create stylish Download, Demo and Buy Button For Your Blogger Blog. So, Let's check out what I have here for you.

    If you use a blogger blog where you share articles and posts related to downloading like movies, then you will need it a lot. you can use my code and also easily add some stylish download button which will look awesome on your website. This code will also be useful for those people who share templates and some other codes in their blog, Then you can easily add button of download, buy and demo through this given code.

    This button is made using CSS, I have given a stylish look to its icon with the help of font awesome. Also, this code is not too lenghty and won't affect your website speed.

    Advantage of Using this Button

    1. It will increase the awesomeness of your website pages.
    2. Visitors will easily find out the button.
    3. It will give your webpage a professional Look.

    How to Make Stylish Download, Buy and Demo Button

    Note:- Before beginning this tutorial backup your blogger theme to avoid any errors and issues.

    1. First Go To Blogger.Com.
    2. Open your blogger dashboard.
    3. Next, Click on the "Theme" Section and Click Edit Html. Option
    4. After that, Find <head> Tag on Theme
    5. Copy the below Font Awesome Link and paste it below <head>   Tag.
    6. Note:- For Copying the Code Double Click over the code box and use CTRL + C on your Keyboard.

        <link crossorigin='anonymous' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css' integrity='sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p' rel='stylesheet'/>
    7. Now Again, Find ]]></b:skin> Tag on Theme
    8. Copy the below CSS Code and paste it above on ]]></b:skin>   Tag.
    9. /* Stylish download, demo, and buy button by Techandfunzone*/
              #wrap {
              margin: 20px auto;
              text-align: center;
          }
          .button-slide, .button-slide2, .button-slide3 {
              position: relative;
              display: inline-block;
              height: 56px;
              width: 200px;
              line-height: 50px;
              padding: 0;
              border-radius: 40px;
              background: #ooo000;
              border: 4px solid #0099cc;
              margin: 10px;
              transition: .5s;
              cursor: pointer;
              box-shadow: 2px 4px 11px #c0c0c0, -2px -4px 11px #fff;
      	}
          .button-slide3 {
              border: 4px solid #66ef6b;
          }
          .button-slide2 {
              border: 4px solid #efa666;
          }
          .button-slide:hover {
              background-color: #0099cc;
          }
          .button-slide2:hover {
              background-color: #efa666;
          }
          .button-slide3:hover {
              background-color: #66ef6b;
          }
          .button-slide:hover span.circle, .button-slide2:hover span.circle2, .button-slide3:hover span.circle3 {
              left: 100%;
              margin-left: -45px;
              background-color: #fdfdfd;
              color: #0099cc;
          }
          .button-slide2:hover span.circle2 {
              color: #efa666;
      	}
          .button-slide3:hover span.circle3 {
              color: #66ef6b;
          }
          .button-slide:hover span.title, .button-slide2:hover span.title2 {
              left: 40px;
              opacity: 0;
          }
          .button-slide:hover span.title-hover, .button-slide2:hover span.title-hover2, .button-slide3:hover span.title-hover3 {
              opacity: 1;
              left: 40px;
          }
          .button-slide span.circle, .button-slide2 span.circle2, .button-slide3 span.circle3 {
              display: block;
              background-color: #0099cc;
              color: #fff;
              position: absolute;
              float: left;
              margin: 5px;
              line-height: 42px;
              height: 40px;
              width: 40px;
              top: 0;
              left: 0;
              transition: .5s;
              border-radius: 50%;
          }
          .button-slide2 span.circle2 {
              background-color: #efa666;
      	}
          .button-slide3 span.circle3 {
              background-color: #66ef6b;	
          }
          .button-slide span.title,
            .button-slide span.title-hover, .button-slide2 span.title2,
            .button-slide2 span.title-hover2, .button-slide3 span.title3,
            .button-slide3 span.title-hover3 {
              position: absolute;
              left: 90px;
              text-align: center;
              margin: 0 auto;
              font-size: 16px;
              font-weight: bold;
              color: #30abd5;
              transition: .5s;
          }
          .button-slide2 span.title2,
            .button-slide2 span.title-hover2 {
              color: #efa666;
              left: 80px;
      	}
          .button-slide3 span.title3,
            .button-slide3 span.title-hover3 {
              color: #66ef6b;
              left: 80px;	
            }
          .button-slide span.title-hover, .button-slide2 span.title-hover2, .button-slide3 span.title-hover3 {
              left: 80px;
              opacity: 0;
          }
          .button-slide span.title-hover, .button-slide2 span.title-hover2, .button-slide3 span.title-hover3 {
              color: #fff;
        }
      .drkM  .button-slide, .drkM .button-slide2, .drkM .button-slide3{background:#1f1f1f}
      .drkM  .button-slide, .drkM .button-slide2, .drkM .button-slide3{background:#2c2d31}
      .drkM  .button-slide, .drkM .button-slide2, .drkM .button-slide3 svg{stroke:#292828}
      .drkM  .button-slide, .drkM .button-slide2, .drkM .button-slide3{box-shadow: 2px 4px 11px #1f1f1f, -2px -4px 11px #000;}
      .drkM  .button-slide, .drkM .button-slide2, .drkM .button-slide3:hover {
      box-shadow: inset 3px 5px 10px #1f1f1f, inset -3px -5px 10px #000;
      border: 4px solid rgba(31, 34, 38 0.2);
      font-size: 16.9px;
      }

    Demo button HTML Code:

    <div id="wrap">
     <a onclick="window.open('URL')" class="button-slide">
          <span class="circle"><i class="fa fa-rocket"></i></span>
          <span class="title">Demo</span>
          <span class="title-hover">Click here</span>
          </a></div>

    Buy Button HTML Code:

    <div id="wrap">
    <a onclick="window.open('URL')" class="button-slide3">
          <span class="circle3"><i class="fa fa-shopping-cart"></i></span>
          <span class="title3">Buy</span>
          <span class="title-hover3">Buy Now</span>
          </a></div>

    Download Button HTML Code:

    <div id="wrap">
    <a onclick="window.open('URL')" class="button-slide2">
          <span class="circle2"><i class="fa fa-download"></i></span>
          <span class="title2">Download</span>
          <span class="title-hover2">Download here</span>
        </a>
    </div>

    Final Words

    I hope this Article Adsense invalid click protector for blogger would be helpful for you. If you want any more information like this article. Please follow our Tech & Fun Zone Telegram Channel for updates.

    Hopefully, the Above tutorial has completely helped you to learn How to Add Adsense invalid click protector for blogger. If you have got any issues in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

    Was it helpful? Consider Donating below.. Thank you for visiting. Happy Blogging..

    © Tech & Fun Zone

    About the Author

    Student | Blogger | Developer

    Post a Comment

    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.