Social Media Icons with Popups HTML & Pure CSS Only

Hello learner, In this article, we are going to create Social Media Icons with Popups Only with HTML and Pure CSS. earlier we have created a Music player widget using HTML, CSS & JS and Responsive dropdown menu using HTML & CSS and many other checks out them.

Social media buttons are presented today on every website. They are for promoting your business on social networks and getting in return potential customers. so we have created Social Media Icons with Popups HTML & Pure CSS Only. the basic concept of this social media icon is to make your website more engaged with clients.

when anyone takes a mouse cursor to the icon the icon hovers in their social media color. Facebook has a blue color and youtube have red . If any take mouse cursor to the Facebook the icon color change in blue and same as for all the icon. IF are confused then look up to the image to output the code. without wasting the time let’s start coding.

Social Media Icons with Popups HTML & pure CSS Only [Source code]

For creating Social Media Icons with Popups you have to create an HTML and CSS file named index.html and style.css in the same folder. After creating the file paste the HTML code in index.html and CSS code in style.css that all.

At first, create an HTML file named index.html and paste the below code on it. Remember to give a .html extension to the HTML file. and save it.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/web/20211104074634cs_/https://codingthai.com/social-media-icons-with-popups/styles.css">
</head>
<body>

<div class="wrapper">
  <div class="icon facebook">
    <div class="tooltip">Facebook</div>
    <span><i class="fab fa-facebook-f"></i></span>
  </div>
  <div class="icon twitter">
    <div class="tooltip">Twitter</div>
    <span><i class="fab fa-twitter"></i></span>
  </div>
  <div class="icon instagram">
    <div class="tooltip">Instagram</div>
    <span><i class="fab fa-instagram"></i></span>
  </div>
  <div class="icon github">
    <div class="tooltip">Github</div>
    <span><i class="fab fa-github"></i></span>
  </div>
  <div class="icon youtube">
    <div class="tooltip">Youtube</div>
    <span><i class="fab fa-youtube"></i></span>
  </div>
</div>

</body>
</html>

After pasting the HTML code. Next, you have to create CSS file name style.css and paste the below code on it. Again remember to give the .css extension to the CSS file and save it.


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus,
*:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  display: grid;
  height: 100%;
  width: 100%;
  font-family: "Poppins", sans-serif;
  place-items: center;
  background: linear-gradient(315deg, #ffffff, #d7e1ec);
}

.wrapper {
  display: inline-flex;
}

.wrapper .icon {
  position: relative;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background-color: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background-color: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background-color: #3b5999;
  color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background-color: #46c1f6;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background-color: #e1306c;
  color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background-color: #333333;
  color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background-color: #de463b;
  color: #ffffff;
}

After creating and pasting the code that’s all now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

Leave a Comment Cancel reply

Quick Link