Today’s tutorial dives into adding social media icons with popups to your website. We’ll explore how to create clickable icons for various social media platforms like Facebook, Twitter, and Instagram that, when clicked, open popups showing your social profiles.
Social media icons on a website can make connecting with your audience easier. With this tutorial, we’ll guide you through the process of embedding these icons and configuring popups to display your social media profiles. This way, visitors can easily access and engage with your social content.
Stay tuned as we uncover the steps to integrate these interactive icons and enhance user engagement on your website.
HTML :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Social Media Icons Popups</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="wrapper">
<li class="icon facebook">
<span class="tooltip">Facebook</span>
<span><i class="fab fa-facebook-f"></i></span>
</li>
<li class="icon twitter">
<span class="tooltip">Twitter</span>
<span><i class="fab fa-x-twitter"></i></span>
</li>
<li class="icon instagram">
<span class="tooltip">Instagram</span>
<span><i class="fab fa-instagram"></i></span>
</li>
<li class="icon github">
<span class="tooltip">Github</span>
<span><i class="fab fa-github"></i></span>
</li>
<li class="icon youtube">
<span class="tooltip">Youtube</span>
<span><i class="fab fa-youtube"></i></span>
</li>
</ul>
<!-- partial -->
</body>
</html>
CSS :
@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;
list-style: none;
}
.wrapper .icon {
position: relative;
background: #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: #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: #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: #1877f2;
color: #ffffff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background: #222222;
color: #ffffff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background: #e4405f;
color: #ffffff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background: #833ab4;
color: #ffffff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background: #cd201f;
color: #ffffff;
}
