Reveal Effect library (Fluent Design System)

Apply reveal effect to border and background of elements.

Demo

See the Demo project for detail or visit

• https://codesandbox.io/p/sandbox/phgz7p
• https://imageglass.org for live demo.

Install

Run the command

npm i fluent-reveal-effect@latest

NPM package: https://www.npmjs.com/package/fluent-reveal-effect

Usage

Base CSS

.btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 1rem 2rem;
  background-color: #333;
  color: #fff;
  border: 0;

  transition: all 200ms ease;
}
.btn-border {
  display: inline-block;
  margin: 5px;
}
.btn-border .btn {
  display: block;
  margin: 2px;
}

1. Apply background effect

HTML

<button class="btn">Button 1</button>

JavaScript

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

// Enable reveal background effect
applyEffect('.btn', {
  lightColor: 'rgba(255,255,255,0.1)',
  gradientSize: 150,
});

// Enable Ripple click effect
applyEffect('.btn', {
  clickEffect: true,
});

2. Apply border and background effect

HTML

<div class="effect-group-container">
  <div class="btn-border">
    <button class="btn">Button 2</button>
  </div>
  <div class="btn-border">
    <button class="btn">Button 3</button>
  </div>
  <div class="btn-border">
    <button class="btn">Button 4</button>
  </div>
</div>

JavaScript

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

applyEffect('.effect-group-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
  }
})

Donate

If you feel this little library useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it.

Thanks for your gratitude and finance help!

License