Social media plays an important role in your online business to reach more customers. Social media buttons are very useful for every website and it helps the user to get updates from the website. Also, a sticky social bar definitely increases your website's social media followers and helps increase traffic to your website. In this tutorial, we are going to create a social media buttons bar with CSS without affecting the website design.
You can find many jQuery plugins for floating sidebar, but it can affect the speed and design of your site. To overcome this problem, we will provide simple CSS code to add animated sticky social bar on left/right side of your website. You can add this social media floating sidebar by smoothly moving it in animation using CSS.
In this example code, we'll implement a social share button bar on the right side with clean CSS. This social bar will include some of the most popular social media links – Facebook, Twitter, Google+, LinkedIn, YouTube and Pinterest.
CSS Code
The following short CSS is enough to implement a Sticky Social Icons bar to your website. Place this CSS in the <head> section of the web page.
HTML Code
Placed the following HTML in the <body> element of the web page, and add your social profile links to the respective social icons.