How to create Buy Now, Demo or Download button in Blogger?

In my last few posts, people were commenting and asks me how we can add or create a demo, download or buy button in the Blogger’s blog post. For this reason, in this post of today, in the blog Mrskt.com, I will tell you how you can easily add such types of buttons to your blog post.

how to add demo download or buy button in Blogger

How to add Demo, Download and Buy Button in Blogger Post?

So Friends, to add the stylish type of buttons of Demo, Download, Buy Now, Cart in your Blogger blog post, you have to follow the steps which are given below from that you can easily create this kind of attractive buttons, So please follow the below steps.

Go To Blogger.com and Login to your Blogger account Dashboard.

Open your browser and click on search bar or Url bar and type Blogger.com and then press enter.

Now, Click on Theme Section.

After logged in in your Blogger dashboard,Go To Theme Option by clicking on it

Then,Go To HTML section after clicking on Edit HTML Option

When you are in theme section,you will see a down arrow button and click on that then some more options will be availablebut you have to click on Edit HTML Option

After that,click anywhere on Html Box

Now,you will see a HTML Box,just click anywhere in that box

After that you have to Press Ctrl+F in your keyboard to open search bar in HTML Box

Now Type or Find ]]></b:skin> or </style>

When you open the search bar,find ]]></b:skin> or </style> in your HTML Box.

Copy the below code

Friends when you find that HTML tags then you have copy the CSS codes that i have provided below and paste it above that tags. If don’s know what is CSS then let me tell you generally CSS codes is used to give style to the HTML elements.

/* Starting Css To DEMO, Download and Buy Button by mrskt.com */
    #m-wrap {
    margin: 10px auto;
    text-align: center;
    }
    #m-wrap br {
    display: none;
    }
    .egg-btn-slide, .egg-btn-slide2, .egg-btn-slide3 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 0px;
    background: #fdfdfd;
    border: 2px solid #009688;
    margin: 10px;
    transition: .5s;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    }
    .egg-btn-slide2 {
    border: 2px solid #8BC34A;
    }
    .egg-btn-slide3 {
    border: 2px solid #f73d00;
    }
    .egg-btn-slide:hover {
    background-color: #009688;
    }
    .egg-btn-slide2:hover {
    background-color: #8BC34A;
    }
    .egg-btn-slide3:hover {
    background-color: #f73d00;
    }
    .egg-btn-slide:hover span.circle, .egg-btn-slide2:hover span.circle2, .egg-btn-slide3:hover span.circle3 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    }
    .egg-btn-slide:hover span.circle{
    color: #009688;
    }
    .egg-btn-slide2:hover span.circle2 {
    color: #8BC34A;
    }
    .egg-btn-slide3:hover span.circle3 {
    color: #f73d00;
    }
    .egg-btn-slide:hover span.title, .egg-btn-slide2:hover span.title2, .egg-btn-slide3:hover span.title3 {
    left: 40px;
    opacity: 0;
    }
    .egg-btn-slide:hover span.title-hover, .egg-btn-slide2:hover span.title-hover2, .egg-btn-slide3:hover span.title-hover3 {
    opacity: 1;
    left: 40px;
    }
    .egg-btn-slide span.circle, .egg-btn-slide2 span.circle2, .egg-btn-slide3 span.circle3 {
    display: block;
    background-color: #009688;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
    }
    .egg-btn-slide2 span.circle2 {
    background-color: #8BC34A;
    }
    .egg-btn-slide3 span.circle3 {
    background-color: #f73d00;
    }
    .egg-btn-slide span.title,
    .egg-btn-slide span.title-hover, .egg-btn-slide2 span.title2,
    .egg-btn-slide2 span.title-hover2,
    .egg-btn-slide3 span.title3, .egg-btn-slide3 span.title-hover3 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #009688;
    transition: .5s;
    }
    .egg-btn-slide2 span.title2,
    .egg-btn-slide2 span.title-hover2 {
    color: #8BC34A;
    left: 80px;
    }
    .egg-btn-slide3 span.title3,
    .egg-btn-slide3 span.title-hover3 {
    color: #f73d00;
    left: 80px;
    }
    .egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
    left: 80px;
    opacity: 0;
    }
    .egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
    color: #fff;
    }
    /* Ending Css To DEMO, Download and Buy Button by mrskt.com */

Click on Save button, to save it

When you successfully added that CSS codes above the ]]></b:skin> or </style> then click on the Save button which you can find on the top area on the right side.

Go to your post in which you want add buttons

After Saving It Go to your Blogger’s blog dashboard and then open your existing post or create a new post in which you want to add that buttons. Then, Change compose view to HTML View and now Copy the code below and paste anywhere in the post where you want to add it, Also don’t forget to edit them according to your needs.

<div id="m-wrap">
    <a class="egg-btn-slide" href="URL" target="_blank">
    <span class="circle"><i class="fa fa-eye"></i></span>
    <span class="title">Demo</span>
    <span class="title-hover">View Now</span>
    </a>
    <a class="egg-btn-slide2" href="URL" target="_blank">
    <span class="circle2"><i class="fa fa-chevron-circle-down"></i></span>
    <span class="title2">Download</span>
    <span class="title-hover2">Download Now</span>
    </a>
    <a class="egg-btn-slide3" href="URL" target="_blank">
    <span class="circle3"><i class="fa fa-shopping-cart"></i></span>
    <span class="title3">Buy Now</span>
    <span class="title-hover3">Purchase Now</span>
    </a>
    </div>
    </div>

Now, Publish/Update your post.

Finally, we are in the last steps in which we only need to update or publish our post’s where we added that stylish buttons.

Here is the Preview:

Demo%2Band%2BDownload%2BButton%2BBlogger 5
Preview

I hope this article might be helpful for you and you have successfully done it. if you have any problem adding the buy no, emo or download button in your blog post then mention and tell me in the comment section about your problem.

Share This Article!

Leave a Reply

Your email address will not be published.