Floating social media buttons in Html and CSS

floating social media buttons

Hello everyone, in this special post we are going to create floating social media icons using Html and CSS. In the last post, we created an NFT Landing page in HTML and CSS. Let’s discuss how we have created these buttons. What are the basic steps toward the completion of this task? Let’s start it.

Floating social media buttons:

As you have seen in the featured image we have created cool floating social media buttons. These buttons are created using Html and CSS only without using a single line of code of javascript. Let’s discuss the features of these social media icons.

Html tags:

As Html is the beginning of the front-end development, so we have started creating these buttons with the help of Html. Html has provided us with the tags for buttons. First, we have used the tag of HTML for buttons. Html has special tags for buttons. After using this tag we created three different buttons. You can create different buttons according to your requirements because we are only giving you a demo, of how to create floating social media buttons in CSS. We have assigned an ID to the very special button. This ID will help us to identify the button and call and style that button in CSS and javascript.

You might like it:

CSS properties:

After creating the structure of the buttons, our next step is to style these buttons properly. For that, we have divided the style part into two sections. Import icons Hover effect
First, we import the icons from font-awesome. Fontawesome is a website that helps us to import icons and fonts into our project by getting the code of these icons. Then we used the code of these buttons in our project. In the next step, we added a hover effect to the buttons. The icons was looking the same without the hover effect. After pointing the mouse the size of the icons expands. The icons started expanding towards the right side due to the property. In the hover effect, we can add different colors and animations to the icons and buttons. The code of these things is separately provided for free but we have combined the code of HTML and CSS.

How to create floating social media buttons in HTML and CSS?

We are going to create these social media icons using HTML and CSS in different steps.
• Download the code editor
• Html source code
• CSS source code
You have created two new files for this project in your editor. These files will be Html and CSS. While saving these files you have to use .html and .css at the end of each file.

Html source code

CSS source code:

Download source code:

We have separately provided the code of Html and CSS. Still, facing errors? Then download the source code, because we have provided the source code and you can download it by simply clicking on the download source code button.


We have tried to explain everything related to floating social media buttons or icons. The button’s structure will be created in HTML and the style will be provided in CSS. CSS styling is divided into two parts(importing icons and hover effect). Color of icons, style of icons, and hover effect can be changed according to your own requirements.

Task: The icons are moving from left to right on the hover effect which is provided using CSS properties. Therefore, your task is to change the position of these icons. Then change the animation from left to right to right to left. Also, change the color of the Instagram icon as well.

So, Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x