Windows 10 Inspired Hover Effect In jQuery - Pointlight

Pointlight is a small jQuery plugin which applies an interactive hover effect to the border and background of block elements (e.g. buttons), inspired by Windows 10 (Fluent Design).

See also:

• Fluent Design Button Hover & Click Effects – fluent-reveal-effect (PURE JAVASCRIPT)

How to use it:

1. Download and place the Pointlight plugin after jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.pointlight.js"></script>

2. Apply the hover effect to block elements you specify.

<button class="example">
  Action Button
</button>

$(function(){
  $('.my-button').pointLight();
});

3. Customize the hover effect by overriding the following parameters:

$(function(){
  $('.my-button').pointLight({
    bg_innerColor: "#888",
    bg_outerColor: "transparent",
    border_innerColor: "#333",
    border_outerColor: "#ddd"
  });
});

---

This awesome jQuery plugin is developed by ImmortalAnon. For more Advanced Usages, please check the demo page or visit the official website.