Fluent Design Button Hover & Click Effects – fluent-reveal-effect

fluent-reveal-effect is a JavaScript library used for creating interactive hover & click effects inspired by Fluent Design System for Windows.

See also:

• Button Proximity With JavaScript And CSS3

How to use it:

1. Install and import  the fluent-reveal-effect library.

# NPM
$ npm install fluent-reveal-effect@latest --save

import { applyEffect } from "fluent-reveal-effect"

2. Apply the hover effect (interactive gradient effect) to the button.

<button class="btn">Hover Me</button>

applyEffect(".btn", {
  lightColor: "rgba(0,0,0,0.3)",
  gradientSize: 250
})

3. Apply a Material Design-style ripple effect to the button when clicked.

applyEffect(".btn", {
  clickEffect: true
})

4. Apply a hover effect to the borders of your buttons within a container.

<div class="button-container">
  <div class="btn-border">
    <button class="btn">Button 1</button>
  </div>
  <div class="btn-border">
    <button class="btn">Button 2</button>
  </div>
  <div class="btn-border">
    <button class="btn">Button 3</button>
  </div>
</div>

applyEffect(".button-container", {
  clickEffect: true,
  lightColor: "rgba(255,255,255,0.6)",
  gradientSize: 80,
  isContainer: true,
  children: {
    borderSelector: ".btn-border",
    elementSelector: ".btn",
    lightColor: "rgba(255,255,255,0.3)",
    gradientSize: 150
  }
})

Changelog:

v3.0.1 (03/12/2023)

• TypeScript support