Learn Website Design and Development

Button Hover Effect #1 - Expand Corners
Sample Button
Sample Button
Sample Button
Sample Button
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
Sample Button
Sample Button
Sample Button
Sample Button
HTML
<div class="btn-tap">
<div class="animation"></div>
<span>Sample Button</span>
</div>
Button Hover Effect #3 - Text Replacement
Sample Button
Sample Button
Sample Button
Sample Button
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>