Social Media Buttons. Social media icons with hover effects are a staple of web design. Most of the time, developers just compensate for a simple button with the social icon struck on it. But let’s get real — basic and usual icons are boring. They’re everywhere and nothing obtains them stand out.
The Social Media Buttons allow your website visitors and content viewers to simply 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 tutorial, we are going to make it all up a little with some hover tooltips. In this tutorial, we are going to make it all up a little with some hover tooltips.
Social Media Buttons With Tooltip ON Hover
We will use two languages first one is HTML and CSS.
Here I will write some HTML code for Markup.
<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>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>You can add fixed social media to your website sidebar easily. Now all done, You just need to copy the above code into your single HTML file and paste it where you want to show these hover tooltip icons.