Creative CSS Button Hover Effects
Download for Free

Button Hover Effect #1 - Expand Corners

HTML

<div class="btn-corner">
  <span class="line1"></span>
  <span class="line2"></span>
  <span class="line3"></span>
  <span class="line4"></span>
  </div>

Button Hover Effect #2 - Tap Interaction

HTML

<div class="btn-tap">
  <div class="animation"></div>
  <span>Sample Button</span>
</div>

Button Hover Effect #3 - Text Replacement

HTML

<div data-text="Click Me" class="btn-swap">
  <span>Sample Button</span>
</div>

Button Hover Effect #4 - Circle to Diamond Animation

HTML

<div class="btn-icon animated">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></div>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></div>
  <a href="#" class="instagram"><i class="fa fa-instagram"></i></div>
  <a href="#" class="github"><i class="fa fa-github"></i></div>
  <a href="#" class="email"><i class="fa fa-email"></i></div>
</div>

Button Hover Effect #5 - Social Icon Animation

HTML

<div class="btn-socials">
  <div class="btn-social facebook"><i class="fa fa-facebook"></i></a>
  <div class="btn-social twitter"><i class="fa fa-twitter"></i></a>
  <div class="btn-social instagram"><i class="fa fa-instagram"></i></a>
  <div class="btn-social github"><i class="fa fa-github"></i></a>
  <div class="btn-social email"><i class="fa fa-email"></i></a>
</div>