Bootstrap 4 Social Floating Icon Using CSS Animation


In this article, we are looking out bootstrap 4 social floating icons using CSS animation. Usually, you require a social icon to share your post an article on your website. To make attractive and effective floating social icon is very easy. Especially when you wanted to get more traffic to your website then you need to make that website more attractive.

So in this article, we look out most amazing and beautiful social icon using Bootstrap 4. So we are creating these social icons.

In the above image, you will see the hover effect. So when you hover the icon automatically icon shape will change and the collapsible icon name will appear. if you wanted to know more about this article and watch the live video of this tutorial just visit our youtube channel.

Before you start reading this article make sure you have the basic understanding of HTML, CSS, and Bootstrap. Other than that you familiar with Jquery to understand this code better. if you are not familiar with this languages don’t worry we will try to explain everything in details.

So now let’s jump into the code.

Step 1:-

So first you need to open up the visual code editor. if you are not familiar with this you can use another one also. but I personally prefer to use this editor. Then create a folder on the desktop and open it in the visual code.

Now here you need to create the index.html file which is used to design our page. and then create the Style.css file. this file used to style the HTML elements.

In index.html file create simple html5 snippets and link bootstrap and style.css file.

After that, just before the closing body tag link the jquery.js file with script tag so we can access the jquery function.

After that create social icon design in the body tag. we are using ul and li tag to accomplished this design. In this design, we added top and left margin. If you want you can place this on the left or right side of the screen. Now we just move forward to make this design.

Now our design is ready. We need to create CSS classes for this design. we already specify the classes to the HTML elements so now we just need to access this classes and create style.

Step 2:-

Now we will look out how to create the style for the HTML design elements. In the style.css file, we will access these classes using (.) keyword and apply some style to it.

So following is the complete style.css file. So you just need to copy this code and paste it into you style.css file.

In this code, you will see we also use the nth-child property of CSS. This property is mostly used to access the child element of the parents class or parents elements. Except create the separate class for all the li element we just put classes for important elements and access other elements using the parents’ classes.

If you wanted to change the background color or font color you are free to do that. In this tutorial, we used hex values to specify the color. if you are not familiar this color pattern you can use another one also.

Step 3:-

In the last step, we will create another file called main.js. In this file, we will put some jquery code to generate mouse events like hover and click. But in this tutorial, we are only using the hover event. In CSS, you cannot use hover effect to the first element and change the property to other elements.

In case, if you wanted to change the background color of parent element using child hover effect. it is not possible for CSS. But using Jquery it is possible. You can change the property of any of the elements.

Suppose, if you wanted to change the background color of the document then you hover the button. you can achieve this using hover function of jquery. Other than that you can change multiple properties at a time using jquery.

Now first create the main.js file and link this file using script tag.

You need to place this code just before the closing body tag. Make sure you place this file just after the jquery.js file. if you place this file before this jquery file then the function you are executing in this file will not work properly.

Now just place this code in the main.js file

So in this code, we just create a simple document.ready() function. this function will execute then DOM elements are completely loaded.

Then except typing the classes more than one time we create a variable called buttons. this variable store the CSS classes in the string. So now you can just put the buttons variable rather than be typing complete CSS classes.

After that create hover function for the first icon child. In the hover function, we specify two functions.

The first function demonstrates the hover on effect and the second function will demonstrate the hover out effect. In the first function, we call the class function of jquery and change the border-radius and padding property of CSS for the specified element.

Then create another CSS function to change the CSS property for .icon-text class. this class is applied to the icon name. we will just increase width and padding.

Hover out Function

In hover out function we will just set the default CSS properties. so when the user hovers the mouse over the element you will see the shape-changing effect. Then when you hover out the mouse it stays the default situation.

That’s it. your Bootstrap 4 Social Floating Icon Using CSS Animation is ready.

That is all for this tutorial. If you find anything useful then share this article and comment your suggestion.

If you have any question you can write me in the comment section and also share your thoughts on the facebook page.

For more information follow us on the facebook page and Instagram.

Thank You. we will see you in the next article.

Leave a Reply

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