Social Media Banners with Hover Effect using HTML & CSS

Social Media Banners with Hover Effect using HTML & CSS

Hello developers, today in this blog, you'll learn to create Social Media Banners with Hover Effect using HTML & CSS.

The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks. The social media icons can be used on your website, to share your content with others.

In this blog (Social Media Banners with Hover Effect), on the webpage, there are five social media banners with their respective names and icons respectively. Those five social media banners are arranged one after the other and a pentagon is on the right side of the banner. The hover effect has been used in every banner. While hovering the banner, the banner is occupied by the respective icon color of the social media which slides from the right of the banner and occupies the full banner with the brand name of their website. The CSS hover effect has been used over the social media banners.

The source code of this Social Media Banners with Hover Effect is given below if you want the source code of this program, you can copy it. You can use these Social Media Banners with Hover Effect on your creativity and, can take this project to the next level.

Social Media Banners with Hover Effect [Source Code]

To make this website (Social Media Banners with Hover Effect), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Social Media Banner || Learningrobo</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="banner"> <i class="fa fa-facebook"></i>Facebook <div class="slider">Learning Robo</div> </div> <div class="banner"> <i class="fa fa-twitter"></i>Twitter <div class="slider">Learning Robo</div> </div> <div class="banner"> <i class="fa fa-linkedin"></i>LinkedIn <div class="slider">Learning Robo</div> </div> <div class="banner"> <i class="fa fa-github"></i>GitHub <div class="slider">Learning Robo</div> </div> <div class="banner"> <i class="fa fa-youtube"></i>Youtube <div class="slider">Learning Robo</div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #ACDF87 0%, #85FFBD 100%);
}
.container {
  width: 1000px;
  height: 100%;
  font-weight: 500;
  font-size: 2.5em;
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #333;
}
.fa {
  padding: 12px;
  height: 60px;
  width: 60px;
  text-align: center;
  text-decoration: none;
  margin-right: 10px;
  border-radius: 50%;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-github {
  background: #5a32a3;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.banner,
.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-radius: 8px;
}
.banner {
  width: 48%;
  background-color: #eee;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: relative;
  overflow: hidden;
  margin: 5px;
}
.slider {
  width: 120%;
  position: absolute;
  background-color: #3b5999;
  color: #fff;
  transform: translateX(-80%);
  clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
}
.banner:hover .slider {
  transform: translateX(0%);
    transition: 0.5s ease-out;
}
.banner:nth-of-type(2) .slider {
  background-color: #55ACEE;
}
.banner:nth-of-type(3) .slider {
  background-color: #007bb5;
}
.banner:nth-of-type(4) .slider {
  background-color: #5a32a3;
}
.banner:nth-of-type(5) .slider {
  background-color: #bb0000;
}
.credit a{
  text-decoration: none;
  color: #bb0000;
  font-weight: 800;
}
.credit {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
We hope you would like these Social Media Banners with Hover Effect using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating these Social Media Banners with Hover Effect using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools