How to Add Floating Effects Button In Blogger Post [Latest design] 2021

Using a Button in Blogger Post

In my previous post, I showed you How to install an HTML Demo and Download button to Blogger. In this tutorial, you will learn how to set up great CSS & HTML Buttons with floating effects for blogger blog posts. The Buttons are used for a variety of purposes in your blog. The status button is used to get information about the final result of the topic under discussion, and the download button is used to download data for blog readers. Today, in this tutorial I will show you some very clean and beautiful CSS & HTML code with a hover effect whenever you hover over the download button on the Blogger blog post.

How This Button Work?

These Buttons are created using HTML and CSS, some of which were simple jQuery buttons to view and download. With one of the four designs, you can create buttons in blogger for many purposes, like download and demo buttons, whenever you hover your mouse over the download buttons to see amazing animated hover effects. The other buttons you created are very simple and not so attractive buttons. These buttons are made with a stunning font look. Not like the other buttons, it was equipped with a floating image display and a hover download button. Now let's dive into the guide to learn how to add styling download buttons to bloggers.

How to Add Button in Blogger?

Adding Buttons to blogger is easy and very simple. Any beginner with good HTML & CSS skills can add these simple HTML & CSS code to their blog. Blogger doesn't support plugins, so you'll need to edit the HTML and CSS to manually add this code to your blogger template. Don't be afraid to try the code in your template. You can read a step-by-step guide that how to upload these HTML / CSS codes and Create a download button into the blogger Post.

How to Create Demo and Download Button In Blogger?

Demo Buttons- Demo Buttons are clickable blogger buttons used to display an overview of manuals and widgets. Websites that provide widgets and templates need a demo button to see how the widget or template looks like. Also, there are blogs with demo buttons for educational posts that provide a better user experience for visitors.
Download Button- The download button is the blogger's clickable button used to download the target. If your blog Provides any Digital Products to save offline then need a download button in your blogger blog.
So today we are going to learn that How to add a demo and download button in your blogger blog posts.

It's very simple and easy to add Buttons in Blogger blog posts, Just follow the simple steps given below.

Steps:

Step 1: Go to Blogger.com

Step 2: Then go to "Theme" and Click on "Edit HTML".

Step 3: Find  ]]></b:skin> 

Step 4: Then Paste give below CSS below it.

<style>
 @import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");

body {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 100vh;
  font-family: "Muli", Arial, sans-serif;
}
.buttons > button{
  margin-right:30px;
} 
.btn-gradient{
  background:#1462ff;
  color:#fff;
  border-radius: 12px;
  padding:12px 48px;
  box-shadow: 0 6px 30px -10px #4a74c9;
  transition:all 0.5s ease;
  border:0;
  letter-spacing:1px;
  text-transform: uppercase;
}
.btn-gradient:hover{
  box-shadow: 0 0 0 0 rgba(0,40,120,0);
  transform:scale(0.93);
}
.gradient2{
  background-image: linear-gradient(60deg, #4aa5fb 10%, #1ccafa 50%, #00e1f9 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0px;
}
.gradient2:hover{
  border-top-left-radius: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 12px;
}
.gradient3{
  background-image: linear-gradient(60deg, #8c38fe 10%, #b72ee4 50%, #9c66e5 100%);
  box-shadow: 0 2px 25px 0 rgba(111, 30, 138, 0.35);
}
.gradient3:hover{
  box-shadow: 0 10px 30px 0 #8c38fe, 0 5px 0 0 #9c66e5;
  transform:translateY(-5px);
}
.gradient4{
  background-image: linear-gradient(60deg, #43fa84 10%, #3afec0 50%, #38fee3 100%);
  box-shadow: 0 2px 25px 0 rgba(56,254,227,0.35);
}
.gradient4:hover{
  box-shadow: 0 10px 12px 0 #48f184b5, 0 8px 2px 0 #57b396;
  transform: rotateX(50deg);
}
</style>

Step 5: Now "save the theme".

Step 6: No go to your Blog Post.

Step 7: Then paste the given below HTML codes in your post to Create Buttons.

 
<div class="buttons">
    <button class="btn btn-gradient" onclick="window.open('https://telegram.me/InfinityBlogger_In')">Telegram</button>
    <br /><br />
    <button class="btn btn-gradient gradient2" onclick="window.open('https://telegram.me/InfinityBlogger_In')">Telegram</button><br /><br />
    <button class="btn btn-gradient gradient3" onclick="window.open('https://telegram.me/InfinityBlogger_In')">Telegram</button><br /><br />
    <button class="btn btn-gradient gradient4" onclick="window.open('https://telegram.me/InfinityBlogger_In')">Telegram</button>
  </div>
<br /><br />
  <button class="btn btn-gradient gradient2" onclick="window.open('https://telegram.me/InfinityBlogger_In')">Download</button>&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;<button class="btn btn-gradient gradient4" onclick="window.open('https://telegram.me/InfinityBlogger_In')">Demo</button>

Step 8: Now publish the post.

Step 9: It's Done!

Demo

Conclusion:

In blogger, we don't get any plugins for buttons, and buttons are so important in Some posts, so today with the help of this post now you are able to create buttons in your blogger blog posts.

Labels : #Blogging ,#Free ,