Skip to main content

Archive

Show more

Follow Us On Social Media | HTML And CSS

by Rustcode
Follow-Us-On-Social-Media

Follow Us On Social Media Using HTML And CSS

"Follow us on social media" is a common element used by every website. But there are different ways to implement social media icons, most website designers use very simple methods such as writing "Follow Us" with a social link (you can read our recent article social media link with animation). But in this animation we have come up with a new concept where the social media link is hidden behind the text "Follow us".

Let's discuss the concept that we will apply to this animation. First, we will add all the social media links with the help of HTML and Font-Awesome. After that a border will be placed around the container of the link. Then with the CSS "before" property, we'll create the mask of the link container. Once this is done, we will add a hover effect. In which social media links will be visible as soon as the mouse moves over the mask because the mask will be hidden in the top of container with animation.

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

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

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

<body>

    main content.

</body>
</html>



02. HTML

Include font-awesome into html document

<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>Follow Us On Social Media | 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>

<div class="wrapper">
  <div class="btn">
    <a href="#"><i class="fa fa-github-square"></i></a>
    <a href="#"><i class="fa fa-codepen"></i></a>
    <a href="#"><i class="fa fa-youtube-play"></i></a>
    <a href="#"><i class="fa fa-facebook-square"></i></a>
    <a href="#"><i class="fa fa-twitter-square"></i></a>
    <a href="#"><i class="fa fa-instagram"></i></a>
  </div>
</div>

</body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;900&display=swap');

*{
  box-sizing: border-box;
}

body{
  margin: 0px;
  padding: 0px;
}

a{
  color: black;
}

a:hover{
  color: #8332AB;
}

.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn{
  width: 280px;
  height: 60px;
  border: 3px solid #8332AB;
  border-radius: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  color: black;
  cursor: pointer;
  overflow: hidden;
  font-size: 24px;
  transition: all 0.5s ease;
}

.btn:before{
  content: "FOLLOW US";
  font-family: "Poppins", sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  letter-spacing: 1px;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #8332AB;
  transition: all 0.5s ease;
}

.btn:hover{
  background: #FFF
}

.btn:hover:before{
  top: -50%;
}



04. Youtube Video

Here we are 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 it from here and change this according to your need.





Comments

Post a Comment