A clean, professional tooltip appears on hover.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>
The border animates to fill the button on hover.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>
A subtle pulse and glow effect to draw attention.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>
The background color smoothly slides in from the bottom.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>
A simple but classic effect where the icon rotates on its axis.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>
A satisfying 3D flip reveals the brand color on the back.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>
The icon flips with a 3D animation when hovered.
<!-- HTML -->
<a href="#" class="social-btn v1" style="--original-color:#3b5998;">
<i class="fab fa-facebook-f"></i>
<span class="tooltip">Facebook</span>
</a>