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

Preview:

Description:

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:

Install the fluent-reveal-effect library.

# NPM
$ npm install [email protected] --save

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

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

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

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

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

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>

FluentRevealEffect.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
  }
})