TikTok Tutorial #21 - How to create simple Social Media Buttons in CSS

Learn with us how to create simple social media button in CSS!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim Fine the full code in bio 🤩🤓 #webdevelopment #socialmedia #programmingexercises #csscoding ♬ original sound - Creative Tim

1. HTML Code

<div class="container">
  
  <a href="#"><i class="fa fa-facebook fa-3x"></i></a>
  <a href="#"><i class="fa fa-twitter fa-3x"></i></a>
  <a href="#"><i class="fa fa-instagram fa-3x"></i></a>
  <a href="#"><i class="fa fa-linkedin fa-3x"></i></a>
  <a href="#"><i class="fa fa-youtube fa-3x"></i></a>
  
</div>

2. CSS Code

.container {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 40%;
  background: -webkit-linear-gradient(left, #9d4edd, #90caf9);
  background: -moz-linear-gradient(left, #90caf9, #24c8e5);
  background: linear-gradient(left, #90caf9, #30e8de);
  
}

a {
  display: inline-block;
  color: black;
  text-decoration: none;
  margin: 15px 4px;
  position: relative;
  -webkit-transition-duration: 0.4s; 
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

a:hover {
  color: #fff;
  opacity: 0.9;
  text-shadow: 2px 3px 5px #ffb700;
  top: -3px;
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources:

Alexandra Murtaza

Alexandra Murtaza