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 v2" style="--original-color:#3b5998;">
  <i class="fab fa-facebook-f"></i>
</a>

3. Pulsating Glow

A subtle pulse and glow effect to draw attention.

<!-- HTML -->
<a href="#" class="social-btn v3" style="--original-color:#3b5998;">
  <i class="fab fa-facebook-f"></i>
</a>

4. Slide-in Fill

The background color smoothly slides in from the bottom.

<!-- HTML -->
<a href="#" class="social-btn v4" style="--original-color:#3b5998;">
  <i class="fab fa-facebook-f"></i>
</a>

5. Icon Rotation

A simple but classic effect where the icon rotates on its axis.

<!-- HTML -->
<a href="#" class="social-btn v5" style="--original-color:#3b5998;">
  <i class="fab fa-facebook-f"></i>
</a>

6. 3D Flip

A satisfying 3D flip reveals the brand color on the back.

<!-- HTML -->
<a href="#" class="social-btn v6" style="--original-color:#3b5998;">
  <i class="fab fa-facebook-f"></i>
</a>

7. Flip on Hover

The icon flips with a 3D animation when hovered.

<!-- HTML -->
<a href="#" class="social-btn v7" style="--original-color:#3b5998;">
  <i class="fab fa-facebook-f"></i>
</a>