Buttons Effects

Librería que añade efectos visuales personalizados interactivos a botones.

Esta pequeña librería proporciona una colección de efectos visuales personalizados para botones, que pueden ser activados o desactivados mediante eventos, añadiendo dinamismo y atractivo a la interacción con los usuarios.

Mixins en el proyecto: Añadir los mixins a tu proyecto es simple. Solo tienes que importarlos y aplicarlos a tus estilos con variables personalizadas, permitiéndote lograr efectos como animación, sombras y más con facilidad y flexibilidad.

Importar SASS:

@import './ani-motion936/Button-Effects/buttons';

Btn-scale

Los botones que tienen esta clase se escalarán y rotarán ligeramente cuando el cursor se coloque sobre ellos.

Formas de aplicar el efecto

Clases CSS: Introduce dinamismo a tus botones con la clase btn-scale, que aplica un efecto de escala y rotación al hacer hover.

Mixins de SASS:

.button{
@include btn-scale($rotate: 10deg, $scale: 1.1);
//...
}

btn-shadow

Los botones con esta clase tendrán una sombra y se desplazarán hacia abajo y a la izquierda cuando se coloque el cursor sobre ellos.

Formas de aplicar al efecto

Clases CSS: Introduce dinamismo a tus botones con la clase btn-shadow, que aplica un efecto de escala y rotación al hacer hover.

Mixins de SASS:

.button{
@include btn-shadow($traslateX: 10px, $color: black);
//...
}

btn-light

Los botones con esta clase tendrán un suave resaltado en forma de sombra al hacer hover.

Formas de aplicar al efecto

Clases CSS: Introduce dinamismo a tus botones con la clase btn-light , que aplica un efecto de escala y rotación al hacer hover.

Mixins de SASS:

.button{
@include btn-loading($color: rgba(0, 0, 0, 0.3), $time: 1s, $border-radius: 5px);
//...
}

btn-loading

Los botones con esta clase mostrarán una animación de carga cuando se coloque el cursor sobre ellos.

Formas de aplicar al efecto

Clases CSS: Introduce dinamismo a tus botones con la clase btn-loading, que aplica un efecto de escala y rotación al hacer hover.

Mixins de SASS:

.button{
@include btn-light($color: #your-color);
//...
}

btn-up

Los botones con esta clase se elevarán ligeramente y tendrán una sombra cuando se coloque el cursor sobre ellos.

Formas de aplicar al efecto

Clases CSS: Introduce dinamismo a tus botones con la clase btn-up, que aplica un efecto de escala y rotación al hacer hover.

Mixins de SASS:

.button{
@include btn-up($traslate: 5px, $color-shadow: #your-shadow-color);
//...
}

eventButtons JS

La función eventButtons del archivo JavaScript permitirá que los efectos se activen o desactiven cuando se dispare un evento en el botón correspondiente.

Uso:

import { eventButtons } from './ani-motion936/Buttons-Effects/JButtons.js';

eventButtons({
element: document.queryselector('.tu-botton'),
event:'click',
effect:'Jbtn-loading'
})

Effects Objeto JS

Los efectos disponibles se almacenan en el objeto effects del archivo JavaScript.

Uso:

import { eventButtons , effects } from './ani-motion936/Buttons-Effects/JButtons.js';

eventButtons({
element: document.queryselector('.tu-botton'),
event:'click',
effect: effects.scale
})