Description:-

Hello everyone! In this video, you are going to learn how to Social Media Button With Hover effect using HTML, CSS.

Let's see how to create to Social Media Button With the Hover effect.

• Flame Effect Text - Using HTML & CSS

• The Glassmorphism Social Button | Using HTML & CSS

• 12 Best WordPress Themes for Your 2021 Projects

• Top 40 HTML Interview Questions | HTML5 Interview

• 12 Best Tips For Learning How-To-Code In Easy And Effective Way

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Social Media Button Hover Effect - Using Html & CSS | Codexbaba

HTML

CSS

body {
  background-color: white;
}
h1 {
  text-align: center;
}
.social-menu ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  margin: 0;
  display: flex;
}
.social-menu ul li {
  list-style: none;
  margin: 0 10px;
}
.social-menu ul li .fa {
  color: black;
  font-size: 25px;
  line-height: 50px;
  transition: 0.5s;
}
.social-menu ul li .fa:hover {
  color: white;
}
.social-menu ul li a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  text-align: center;
  transition: 0.5s;
  transform: translate(0, 0px);
  box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}

.social-menuul li a:hover {
  transform: rotate(0deg) skew(0deg) translate(0, -10px);
}
.social-menu ul li:nth-child(1) a:hover {
  background-color: #3b5999;
}
.social-menu ul li:nth-child(2) a:hover {
  background-color: #55acee;
}
.social-menu ul li:nth-child(3) a:hover {
  background-color: #e4405f;
}
.social-menu ul li:nth-child(4) a:hover {
  background-color: #cd201f;
}
.social-menu ul li:nth-child(5) a:hover {
  background-color: #007785;
}

Social Media Button Hover Effect - Using Html & CSS | Codexbaba

Description:-

You Might Also Like

Source code:-

Social Media Button Hover Effect - Using Html & CSS | Codexbaba

HTML

CSS

Post a Comment

Contact Form