Skip to main content

Archive

Show more

Floating Social Media Icons | Rustcode

by Rustcode
Floating-Social-Media-Icons-HTML-And-CSS

Floating Social Media Icons Using HTML And CSS

You have seen many websites that have floating buttons to improve the user experience. Floating buttons like back to top, chatbot button and social media button. In this article, we will design floating buttons.

This animation has 5-6 social media buttons on the left side of the screen, all these buttons are fixed so they will not change their position when you scroll. We have created a social media button with a hover effect, you can also see it.

We have created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Floating Social Media Icons | Rustcode</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

In this file we are using font-awesome cdn link to add icons. 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



<!DOCTYPE html>
<html>
  <head>
    <title>Floating Social Media Icons | Rustcode</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <ul id="container">
      <li><a style="background: #3C5A96" href="#"><span class="fa fa-facebook fa-2x"></span></a></li>
      <li><a style="background: #C4302B" href="#"><span class="fa fa-youtube fa-2x"></span></a></li>
      <li><a style="background: #1178B3" href="#"><span class="fa fa-linkedin fa-2x"></span></a></li>
      <li><a style="background: #C8232C" href="#"><span class="fa fa-pinterest fa-2x"></span></a></li>
      <li><a style="background: #1DADEB" href="#"><span class="fa fa-twitter fa-2x"></span></a></li>
    </ul>
  </body>
</html>



03. CSS

#container {
  position: fixed;
  top: 140px;
  left: 0px;
  padding: 0px;
  list-style: none;
  z-index: 1;
}

#container li a {
  display: block;
  text-decoration: none;
  color: white;
}

#container li a span {
  display: block;
  max-width: 40px;
  padding: 10px;
  transition: all 0.2 ease-in-out;
}

#container li a:hover span {
  background: rgba(0, 0, 0, 0.2);
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download from here and change this according to your need.





Comments

Post a Comment