How to add floating button on blogger

What's up guys it's me softa tuts in this article we will talk about how you can add a floating button on your blogger blog. We are designing a button first then we add this to the corner by using css. Border-radius is actually a feature of the floating button, so I give 50px border-radius on the button.

DemoNow I am providing the css and HTML code after that you can customize this icon by yourself.

.sayem-chat-button {
-webkit-animation: r0 1.5s 0s ease-out infinite;
-moz-animation: r0 1.5s 0s ease-out infinite;
animation: r0 1.5s 0s ease-out infinite;
}
.sayem-chat-button {
padding-left: 1px;
text-align: center;
font-size: 23px;
font-weight: 700;
background: #23cf5f;
letter-spacing: 1px;
color: #ffffff;
border-radius: 50px;
margin-bottom: 10px;
position: fixed;
bottom: 50px;
right: 20px;
font-family: 'Overpass';
}
.sayem-chat-button a {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
display: block;
font-size: 28px;
}

<div class='sayem-chat-button'>
<a title="chat with us." href='url_here' style='color:#fff;' target='_blank'>Content Here</a>
</div>

Customize

If you want to customize this icon you need to change the css. 

  //This css is the main design
  .sayem-chat-button {
padding-left: 1px;
text-align: center;
font-size: 23px;
font-weight: 700;
background: #23cf5f;
letter-spacing: 1px;
color: #ffffff;
border-radius: 50px;
margin-bottom: 10px;
position: fixed;
bottom: 50px;
right: 20px;
font-family: 'Overpass';
}

//This css is use for the main body design (example: size)
.sayem-chat-button a {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
display: block;
font-size: 28px;
}

Now let's look at the HTML there is some simple HTML code because I am designing this button with css. On the HTML you need to change the url_here with your button URL or what you want to add. On the Content Here add your button icon, image, etc.

How to add this button on blogger

There are some easy steps to add this button on your blogger blog:

1. Open blogger dashboard
   
2. Go to the theme section
3. Go to edit HTML from the three-dot icon
4. Now search for </body> tag and add the HTML
5. The search ]]><b:skin> tag then add the css after this tag.
6. Save your theme.
7. Now see.

Conclosing

This article I am writing for those who want to add a floating button on their blogger blog but you can use this on any kind of website. If you want to use this on your website then no problem because I make this open-source. Thanks for with us.