How To Add Buy Now Button , Download Button , Shop Now Button In Blogger By Saransh Sagar ?

By July 13, 2020 Blogger, Blogging, Blogspot, Buy Now Button, Saransh Sagar 0 Comments



Well , there are lots of ways for making buttons like download button, buy now button or shop now button and i will cover almost all ways for new bloggers as well as experienced ones to make your button atractive and beautiful.
Let’s discuss some most important ways to generate buttons in blogger ( blogspot website ) . Also you can use this tricks in every other platform, i am not taking any guarantee but it should work in all platforms where html can work. hahah 🙂

No.1 ) You can make buttons by adobe photoshop ,paint or any other poster or photo editor software and via online tools and apps too. Well in my case i refer to two sites which i usually use in my blogging journey or office related work. POSTERMYWALL.COM , PIXLR.COM/X  . These two websites will help you for sure to make beautiful buttons where you can use this simple way to insert button image link in below reference code.

<a href=”button link“><img src=”image link“></img></a>

No.2 ) You can use some website as well in order to make buttons . You have to choose your button color and hover effect color, size , shape and just copy the button code and it’s respective style css code to show button successfully.Here it is !! I have mentioned one of them which i usually use


Now Text , Size , Border settings can be changed by yourself and also lots of wide varities are also available in order to make your button attractive. Test each of them and copy the code which you like to apply. See below reference image for more info
No. 3 ) Do code with yourself and change accordingly to your adjustments and requirments. I am mentioning my code which i generally change or use in my blog post or in making website.see below reference code.

<a href=”https://www.saranshsagar.com/”><button class=”btn btn-primary” type=”button”>Primary</button></a>

<button class=”btn btn-secondary” type=”button”>2ndary</button>

<button class=”btn btn-success” type=”button”>Success</button>

<button class=”btn btn-danger” type=”button”>Danger</button>

<button class=”btn btn-warning” type=”button”>Warning</button>

<button class=”btn btn-info” type=”button”>Info</button>

This code only works if you use this necessary code in your html section or web page.see below reference code.


Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css” integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk” crossorigin=”anonymous”>

Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.

<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js” integrity=”sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI” crossorigin=”anonymous”></script>

By changing class and background color , you can customize your button as per your wish. 

<button class=”btn1″ style=”width: 100%;”><i class=”fa fa-shopping-cart”></i> Buy Now</button>

<style>
/* Button Code*/
.btn1 {
  background-color: blue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
  font-style: verdana;
}

/* Darker background on mouse-over */
.btn1:hover {

}

</style>

/* Button Code*/

Hope you liked my content and enjoyed it. Must share because sharing is caring. !! 🙂


Related Posts

About Author

blogsaranshsagar999

Add a Comment

Your email address will not be published. Required fields are marked *