Skip to main content

Social Media Buttons Animation With Rotation Hover Effect | Rustcode

by Rustcode
Social-Media-Button-With-Hover-Effect-Animation

"Social Media Links" is necessary for every company or individual who has an online identity or wanna create an online identity. Here we will create social media links with a hover effect that looks pretty cool. You can implement this concept into your website or portfolio.

Let's crack the concept of this animation. first, we will add all social media links with the help of HTML and beautify them with css. After that, we will add a hover effect in this animation where social media icons will rotate with shadow.



You can learn other "effects on image" from our website. Apart from this, you can learn other animations related to web development.



01. HTML STRUCTURE

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

<body>

	main content.

</body>
</html>


2. INCLUDE FONT-AWESOME

<!DOCTYPE html>
<html>
  <head>
    <title>Social Media Icons With Rotation Effect | 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" href="style.css">
  </head>
  <body>
    
    Main Content.
    

  </body>
</html>


03. HTML

We are also including an image in the blog card design. You can download that image from here. 

<body>
  <div class='container'>
    <div class="content">
      <h1>Social Media Icons</h1>
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-linkedin"></a>
      <a href="#" class="fa fa-youtube"></a>
      <a href="#" class="fa fa-instagram"></a>
    </div>
  </div>
</body>



04. CSS

body {
  padding: 0px;
  margin: 0px;
  background-image: url('bg4.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
  opacity: .9;
  color: white;
  text-align: center;
}

.fa {
  color: white;
  padding: 20px;
  width: 16px;
  text-align: center;
  text-decoration: none;
  margin: 5px;
  border-radius: 50%;
  border: 2px double white;
  transition: all .4s;
}

h1 {
  font-size: 24px;
  color: white;
  text-align: center;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 100px;
  background: #777;
  opacity: .8;
}

.content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 100px;
  background: #444;
  width: 100%;
  text-align: center;
}

.fa:hover {
  background-color: #333;
  border: 2px double #333;
  opacity: .9;
  transform: rotate(360deg);
  box-shadow: 2px 2px 24px #fff;
}



05. 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.



06. 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.




RELATED POST:

Comments

Post a Comment