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

Category: Animation , Javascript | September 7, 2019
Author: d2phap
Views Total: 1,262
Official Page: Go to website
Last Update: September 7, 2019
License: MIT

Preview:

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

Description:

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

See also:

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

Changelog:

v1.1.1 (09/07/2019)

  • Clean up code and bump version

You Might Be Interested In:


Leave a Reply