Pure CSS Sticky Social Media Buttons Using CSS & HTML

In this video, you are going to learn how to design a fixed sticky social media buttons for a website only using HTML and CSS as you can see in this video. you can easily place those fixed sticky social media buttons anywhere on your website. Let’s see how to create these social media buttons.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Social Buttons</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  </head>
  <body>

    <!--social buttons start-->
    <div class="social">
      <a href="#">Facebook <i class="fab fa-facebook"></i></a>
      <a href="#">Youtube <i class="fab fa-youtube"></i></a>
      <a href="#">Instagram <i class="fab fa-instagram"></i></a>
      <a href="#">Twitter <i class="fab fa-twitter"></i></a>
    </div>
    <!--social buttons end-->

  </body>
</html>

style.css


body{
  margin: 0;
  padding: 0;
  height: 100vh;
  background: url(1.jpg)no-repeat;
  background-size: cover;
  font-family: "Roboto", sans-serif;
}

.social{
  position: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(-290px, 0);
}

.social a{
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin: 5px;
  padding: 20px;
  width: 300px;
  text-align: right;
  border-radius: 50px;
  transition: 1s;
  transition-property: transform;
}

.social a:hover{
  transform: translate(140px, 0);
}

.social i{
  margin-left: 10px;
  font-size: 30px;
  width: 30px;
  height: 30px;
}

.social a:nth-child(1) i{
  color: #1DA0F0;
}

.social a:nth-child(2) i{
  color: #F80000;
}

.social a:nth-child(3) i{
  color: transparent;
  background-image: linear-gradient(45deg, #FFDF9E, #E56969, #8A49A1);
  -webkit-background-clip: text;
  font-weight: 600;
}

.social a:nth-child(4) i{
  color: #4ECCE8;
}

#html #css