1. Tooltip Reveal

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>

2. Expanding Border

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>

3. Pulsating Glow

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>

4. Slide-in Fill

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>

5. Icon Rotation

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>

6. 3D Flip

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>

7. Flip on Hover

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>