Direction-aware Ripple Hover Effect In jQuery And CSS3
File Size: | 3.34 KB |
---|---|
Views Total: | 2197 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fancy, direction-aware, ripple-style hover effect that appears depending on the direction your mouse enters into the element.
Ideal for creating an interactive call to action button using a little bit of JavaScript and CSS/CSS3.
How to use it:
1. Create a call to action button where you want to apply the ripple hover effect.
<div class="action-button"> <a href="#"> <span></span> Button Hover Effect </a> </div>
2. The example CSS for the button.
.read-more > a { border: 2px solid rgb(0, 119, 255); color: rgb(0, 119, 255); display: inline-block; font-size: 1.8rem; overflow: hidden; padding: 10px 30px; position: relative; text-transform: uppercase; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; } .read-more > a:hover { color: #ffffff; }
3. Apply CSS styles to the ripple hover effect.
.read-more > a > span { background-color: rgb(0, 119, 255); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; color: #ffffff; display: block; height: 0; position: absolute; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: height 1s, width 1s; -moz-transition: height 1s, width 1s; -ms-transition: height 1s, width 1s; -o-transition: height 1s, width 1s; transition: height 1s, width 1s; width: 0; z-index: -1; } .read-more > a:hover > span { height: 700px; width: 700px; }
4. Load the latest version of jQuery library (slim build) at the bottom of the HTML page.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
5. The JavaScript (jQuery script) to track the mouseenter
event and apply the ripple effect to the button.
$(function() { $(".action-button > a").on('mouseenter', function(e) { x = e.pageX - $(this).offset().left; y = e.pageY - $(this).offset().top; $(this).find("span").css({ top: y, left: x }); }); $(".action-button > a").on('mouseout', function(e) { x = e.pageX - $(this).offset().left; y = e.pageY - $(this).offset().top; $(this).find("span").css({ top: y, left: x }); }); });
This awesome jQuery plugin is developed by mohit-design. For more Advanced Usages, please check the demo page or visit the official website.