Social Media Buttons with Tooltip on Hover using only HTML & CSS
Hello readers, Today in this blog you’ll learn how to create the Social Media Buttons with Tooltip on Hover using only HTML & CSS. The Social Media Buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A tooltip is a short, informative message that appears when a user interacts with an element.
In this program (Social Media Buttons with Tooltip), at first, on the webpage, there are five social media buttons – Facebook, Twitter, Instagram, Github, and YouTube. When you hover on a particular button or icon then the tooltip appears with sliding animation and the background color of a button also changes with the default icon color. Inside tooltip, there is the name of a particular hovered social media icon as you have seen in the image.
HTML CODE
<!DOCTYPE html> <!-- Created By SpicyCoder | www.spicycoder.tech --> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Buttons with Tooltip on Hover using only HTML & CSS | SpicyCoder</title> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/fddb5bf1f7.js" crossorigin="anonymous"></script> </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>
CSS CODE
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html,body{ display: grid; height: 100%; width: 100%; place-items: center; background: #E4EFE7; } .wrapper{ display: inline-flex; } .wrapper .icon{ margin: 0 20px; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; z-index: 2; transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .icon span{ display: block; height: 60px; width: 60px; background: #fff; border-radius: 50%; position: relative; z-index: 2; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .icon span i{ line-height: 60px; font-size: 25px; } .wrapper .icon .tooltip{ position: absolute; top: 0; z-index: 1; background: #fff; color: #fff; padding: 10px 18px; font-size: 20px; font-weight: 500; border-radius: 25px; opacity: 0; pointer-events: none; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .icon:hover .tooltip{ top: -70px; opacity: 1; pointer-events: auto; } .icon .tooltip:before{ position: absolute; content: ""; height: 15px; width: 15px; background: #fff; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(45deg); transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper .icon:hover span{ color: #fff; } .wrapper .icon:hover span, .wrapper .icon:hover .tooltip{ text-shadow: 0px -1px 0px rgba(0,0,0,0.4); } .wrapper .facebook:hover span, .wrapper .facebook:hover .tooltip, .wrapper .facebook:hover .tooltip:before{ background: #3B5999; } .wrapper .twitter:hover span, .wrapper .twitter:hover .tooltip, .wrapper .twitter:hover .tooltip:before{ background: #46C1F6; } .wrapper .instagram:hover span, .wrapper .instagram:hover .tooltip, .wrapper .instagram:hover .tooltip:before{ background: #e1306c; } .wrapper .github:hover span, .wrapper .github:hover .tooltip, .wrapper .github:hover .tooltip:before{ background: #333; } .wrapper .youtube:hover span, .wrapper .youtube:hover .tooltip, .wrapper .youtube:hover .tooltip:before{ background: #DE463B; }
