An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Mashable
- Team Treehouse
- Pearsonified
- Web Designer Depot
- CSS Tricks
- Web Resource Source
- Codrops
- Android Headlines
- Daily Now
- Hashedout
Help Webnuz
Referal links:
Social Media Buttons With Tooltip
Social Media Buttons With Tooltip
In this post youll learn how to create the Social Media Buttons with Tooltip on Hover using only HTML & CSS. Earlier I have shared a blog on How To Create Animated Progress Bar HTML and now Im going to create the Tooltip for Social Media Buttons or Icons.
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, Dribble, and Linkedin. When you hover on a particular button or icon then the tooltip appears with sliding animation. Inside tooltip, there is the name of a particular hovered social media icon as you have seen in the image.
Now, We just need to have two files one is HTML and other one is CSS or you can simply add CSS in your HTML File.
HTML Code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><div class="soft-icons"> <a class="soft-icon soft-icon--facebook"> <i class="fa fa-facebook"></i> <div class="tooltip">Facebook</div> </a> <a class="soft-icon soft-icon--twitter"> <i class="fa fa-twitter"></i> <div class="tooltip">Twitter</div> </a> <a class="soft-icon soft-icon--dribbble"> <i class="fa fa-dribbble"></i> <div class="tooltip">Dribbble</div> </a> <a class="soft-icon soft-icon--instagram"> <i class="fa fa-instagram"></i> <div class="tooltip">Instagram</div> </a> <a class="soft-icon soft-icon--linkedin"> <i class="fa fa-linkedin"></i> <div class="tooltip">LinkedIn</div> </a></div>CSS Code:
<style>.tooltip { display: block; position: absolute; top: 0; left: 50%; padding: 0.8rem 1rem; border-radius: 40px; font-size: 0.8rem; font-weight: bold; opacity: 0; pointer-events: none; text-transform: uppercase; transform: translate(-50%, -100%); transition: all 0.3s ease; z-index: 1;}.tooltip:after {display: block; position: absolute; bottom: 1px; left: 50%; width: 0; height: 0; content: ""; border: solid; border-width: 10px 10px 0 10px; border-color: transparent; transform: translate(-50%, 100%);}.soft-icons { display: flex; align-items: center; justify-content: center; min-height: 100vh;}.soft-icon { display: flex; align-items: center; justify-content: center; position: relative; width: 80px; height: 80px; margin: 0 0.5rem; border-radius: 50%; cursor: pointer; font-size: 2.5rem; text-decoration: none; transition: all 0.15s ease;}.soft-icon:hover { color: #fff;}.soft-icon:hover .tooltip { visibility: visible; opacity: 1; transform: translate(-50%, -150%);}.soft-icon:active { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;}.soft-icon--linkedin { background: #006599; color: #fff;}.soft-icon--linkedin .tooltip { background: #006599; color: currentColor;}.soft-icon--linkedin .tooltip:after { border-top-color: #006599;}.soft-icon--twitter { background: #2b97f1; color: #fff;}.soft-icon--twitter .tooltip { background: #2b97f1; color: currentColor;}.soft-icon--twitter .tooltip:after { border-top-color: #2b97f1;}.soft-icon--codepen { background: #000; color: #fff;}.soft-icon--facebook { background: #3b5a9b; color: #fff;}.soft-icon--facebook .tooltip { background: #3b5a9b; color: currentColor;}.soft-icon--facebook .tooltip:after { border-top-color: #3b5a9b;}.soft-icon--instagram { background: #527fa6; color: #fff;}.soft-icon--instagram .tooltip { background: #527fa6; color: currentColor;}.soft-icon--instagram .tooltip:after { border-top-color: #527fa6;}.soft-icon--dribbble { background: #ef5a92; color: #fff;}.soft-icon--dribbble .tooltip { background: #ef5a92; color: currentColor;}.soft-icon--dribbble .tooltip:after { border-top-color: #ef5a92;}.soft-icon i { position: relative; top: 1px;}</style>That's it. You're able to add above HTMl and CSS code where you want to show. Like in the bottom of your blog post. or any Web Page. If you face any difficuly in above code and design, Discuss below I'll help you to solve your problem. Thank you.
Original Link: https://dev.to/softcodeon/social-media-buttons-with-tooltip-34jb
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To