Subscribe Youtube Channel Muxic 0.9 ♪ Contact Us Subscribe!
Home
Blogging

Stylish Download Button HTML for Your Blogger Site

Elevate your blog with our stylish HTML download buttons - perfect for Blogger sites! Click here to enhance visitor engagement with chic, easy-to-use
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

 Beautiful Hover Effect 

Let's Begin

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: In Blogger, create a post or page and insert the code shown below.

Step #5: Copy and paste the following code into Blogger's blog post/page editor's HTML area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abdullahdcurz Buttons</title>
<style>
  .abdullahdcurz-button,
  .abdullahdcurz-button2 {
    position: relative;
    display: inline-block;
    height: 40px;
    width: 170px;
    line-height: 40px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #f84f4f;
    margin: 10px;
    transition: all 0.5s ease-in-out;
  }
  .abdullahdcurz-button2 {
    border: 2px solid #36D7B7;
  }
  .abdullahdcurz-button:hover {
    background-color: #f84f4f;
  }
  .abdullahdcurz-button2:hover {
    background-color: #36D7B7;
  }
  .abdullahdcurz-button:hover span.circle,
  .abdullahdcurz-button2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #f84f4f;
  }
  .abdullahdcurz-button2:hover span.circle2 {
    color: #36D7B7;
  }
  .abdullahdcurz-button:hover span.title,
  .abdullahdcurz-button2:hover span.title2 {
    left: 40px;
    opacity: 0;
  }
  .abdullahdcurz-button:hover span.title-hover,
  .abdullahdcurz-button2:hover span.title-hover2 {
    opacity: 1;
    left: 28px;
  }
  .abdullahdcurz-button span.circle,
  .abdullahdcurz-button2 span.circle2 {
    display: block;
    background-color: #f84f4f;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
  }
  .abdullahdcurz-button2 span.circle2 {
    background-color: #36D7B7;
  }
  .abdullahdcurz-button span.title,
  .abdullahdcurz-button span.title-hover,
  .abdullahdcurz-button2 span.title2,
  .abdullahdcurz-button2 span.title-hover2 {
    position: absolute;
    left: 65px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #f84f4f;
    transition: .5s;
  }
  .abdullahdcurz-button2 span.title2,
  .abdullahdcurz-button2 span.title-hover2 {
    color: #36D7B7;
  }
  .abdullahdcurz-button span.title-hover,
  .abdullahdcurz-button2 span.title-hover2 {
    left: 80px;
    opacity: 0;
  }
  .abdullahdcurz-button span.title-hover,
  .abdullahdcurz-button2 span.title-hover2 {
    color: #fff;
  }
</style>
</head>
<body>
<div id="wrap" style="text-align:center">
  <a class="abdullahdcurz-button" href="#" rel="no-follow" target="_blank">
    <span class="circle"><i class="fa fa-laptop"></i></span>
    <span class="title">Live Demo</span>
    <span class="title-hover">Click here</span>
  </a>
  <a class="abdullahdcurz-button2" href="#" rel="nofollow" target="_blank">
    <span class="circle2"><i class="fa fa-download"></i></span>
    <span class="title2">Download</span>
    <span class="title-hover2">Click here</span>
  </a>
</div>
</body>
</html>
Step #6: Now click on save theme.

I hope you were able to successfully add the Stylish Download Button in your Blogger blog after completing the preceding steps. Please contact us if you experience any kind of issue.

Before starting always backup your template for any kind of error and easy restoration.

Copyright:
www.abdullahdcurz.blogspot.com

Go to Link
Go to Link

About the Author

Welcome to my Site! Hi, this is Mr.Abdullah. If you have any questions related to this blog you can find us here on Instagram @abdullahdcurz Or, you can mail us here: abdullahdcurz@mail.com. Thank you.
#Blogging

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.