Light effect for button?

[Losses]

trafficstars

https://codepen.io/rauldronca/pen/WMayrP I just found this demo, and the effect may be modified and make it looks like FDS's light effect for buttons, is it possible?

[myxvisual]

@Losses Thanks for the suggestion, this is a good result. According to the requirements of the Reveal Highlight Docs, the background and the border have different highlighting effects. If this effect cannot be achieved, your suggestion will be used to implement it.

[touseefbsb]

the codepen example seems to be missing any click ripple effect which normal reveal buttons of uwp fluent design have.

[d2phap]

My contribution: https://codepen.io/d2phap/full/rpJEaK/

• Background hover effect
• Click ripple effect (but no expanding)

[Losses]

@d2phap Not very close to fds, the light effect of fds will appear when your mouse point close to the button (even not move into the button). May be an ideal solution is using context api, provide a global light effect calculation data source, and use another worker for the intensive computing, the task is very very tedious...

[d2phap]

@Losses You can apply the effect to nested items to achieve the reveal border effects. I updated my demo: https://codepen.io/d2phap/full/rpJEaK/

• Background hover effect
• Click ripple effect (but no expanding)
• Full border reveal effect

NPM install: npm i fluent-reveal-effect@latest

Full source code: https://github.com/d2phap/fluent-reveal-effect

[Losses]

@d2phap Really impressive work, but there are some mistake, the border effect of fds is inside the container, the light effect is much lighter than the effect inside the container, it's very hard to implement this difference. some CSS attr can help like clip path, but not all browser can render it correctly.

[d2phap]

the border effect of fds is inside the container

You can set the background of btn-border as same as btn class.

.

the light effect is much lighter than the effect inside the container

You can adjust the light color, light size by override the below options https://github.com/d2phap/fluent-ui/blob/master/Source/lib/js/modules/reveal.js#L43

RevealEffect.applyTo(".effect-group-container", {
	click_effect: true,
	light_color: "rgba(255,255,255,0.3)",
	gradient_size: 100,
	is_container: true,
	children: {
		border: ".btn-border",
		el: ".btn"
	}
})

The strength of this is to allow you to customize light color, light size. You just need to override the options. Anw, I updated the effects in demo link

[Losses]

@d2phap wow, it looks really awsome!

[Losses]

@d2phap By the way, is there any pressure test, how many buttons on the screen at the same time will affect the effect of page rendering.

[touseefbsb]

the button click ripple effect should also be a bit slower

[jonaskuske]

Just stumbled across this issue, got hooked and built this based on the CodePen shared at the top of the thread 👀
Still a little bare bones though: https://codepen.io/21stCenturyJonas/full/gQGXdd/

[Losses]

To anyone who is still interested in this question, our team have implemented an reveal highlight effect based on Web Components,

Sorce Code: https://github.com/ax-design/reveal-highlight Demo: https://Ax-design.github.io/demo/reveal-highlight.html

For the concern of rendering effect, we used CSS Typed OM to manage styles, but it's okay to be transformed to a custom style system, interested to have a try?

@myxvisual