How to Add a responsive button in Blog posts:

Hello Friends! Are you searching for "How to add a responsive buttons in blog post" for providing file download link or any other link. Then your search is over!

Here in this article I am going to share with you How to add a responsive button in Blog posts For Your Blogger website

Don’t worry I’m not going write so long article here on this topic.

How to create a responsive button with icon in Blog posts

In this article, we'll see some really cool looking responsive buttons using only using HTML and CSS.

Features Of Responsive Button

  1. This is Fully Responsive.
  2. Use Font Awesome Icons.
  3. 50+ icon available
  4. Made with pure HTML and CSS.
  5. Easy to install.

How to add Responsive Buttons in Blogger

You need to Add an icon library, such as font awesome, and append icons to HTML buttons. For do it follow the bellow Steps:

Step .1

  • Go To Blogger Dashboard.
  • Template >> Edit HTML.
  • Press CTRL+F and find <head> Tag and just below of it paste below code.

<!-- Add icon library -->

<link rel="stylesheet" href="">code-box

If your Blogger Template Allready have above font-awesome icon library, the skip this.alert-info

Step 2

  • Again Press CTRL+F and find ]]<bskin> Tag and just above of it paste below code.

 .play-btn {
  border: 2px solid green;
  background-color: #ffffff;
  border-radius: 15px 15px 15px 15px;
  display: play-btn;
  width: 100%;
  text-align: center;
  color: #ff3339;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
.play-btn:hover {
  background-color: #e3e3e3;

Now save the Template.

Step 3.

  • Now open a existing blog post or create new post with html mode
  • Next, just copy and paste below html code where you want to add button in your blog post.

<p><button class="play-btn"><a href="" rel="nofollow" target="_blank"><i class="fab fa-google-play"></i> Get it on Google Play</a></button></p>

Next, publish the post.

Finley! we have successfully add a responsive button in blog post with icon using html and css.


So I think above guide is about How To Create Responsive Buttons in blog post with icon help you to install button into your blogger blog.

If it did not appear on your blog even after following all steps correctly then please let us know. We’ll personally help you out for sure.

Also give feedback for button design and responsiveness by dropping a comment in box below.

Don’t forget to share on Blogging Communities and with Blogger Friends.


Debashis is a Young Entrepreneur Blogger having Good Technical skills, He also an Experienced Article Writer. He likes to Share Knowledge and Experience with People. facebook whatsapp telegram instagram

Post a Comment

To be published, comments must be reviewed by the administrator.

Previous Post Next Post