Botón de diseño fluido Hover & haga clic en efectos-fluidez-revelar-efecto
| Autor: | d2phap |
|---|---|
| Views Total: | 830 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 17, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Ejecute una función después de cerrar la notificación.
See also:
Funcionamiento
Instale la biblioteca de efectos de revelación fluida.
# NPM $ npm install [email protected] --save
Aplique el efecto hover (efecto de degradado interactivo) al botón.
<button class="btn">Hover Me</button>
FluentRevealEffect.applyEffect(".btn", {
lightColor: "rgba(0,0,0,0.3)",
gradientSize: 250
}) Aplique un efecto de ondulación de estilo de material Design al botón cuando se hace clic.
FluentRevealEffect.applyEffect(".btn", {
clickEffect: true
}) Aplique un efecto Hover a los bordes de los botones dentro de un contenedor.
<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
}
})
