boton_efecto5
v1.1.1
Published
CSS para añadir efectos a los botones
Downloads
23
Maintainers
georgeguitarReadme
Proyecto Final del Módulo de Gestión de Paquetes
Autor
Navarro Arias Juan Dirceu
Resumen
Paquete que se puede utilizar para añadir un efecto de desvanecimiento y hacer aparecer un carrito de compras a un botón html mediante CSS. La versión "beta" tiene la base y sobre esa se construyó la versión "release".
Se utilizó el gestor de paquetes NPM, el nombre del paquete es: "boton_efecto"
Disponible en:
Modo de uso
Para utilizar el paquete, se debe instalar con:
Versión beta:
$ npm install [email protected]
Versión release:
$ npm install [email protected]
Una vez instalado el paquete, se debe incluir el archivo "button.css" en el código html.
<head>
<link href="node_modules/boton_efecto5/button.css" type="text/css" rel="stylesheet" />
</head>El paquete descargado tienen dos archivos html para hacer la prueba inmediata de la funcionalidad:
ejemplo-efecto_carrito_de_compras.htmlejemplo-efecto_desvanecimiento.html
Botón con efecto de desvanecimiento.
Para utilizar el efecto, se tiene que incluir el estilo "button".
<button type="button" onclick="alert('¡Opción 1!')" class="button">¡Opción 1!</button>Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link href="node_modules/boton_efecto5/button.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Botón con efectos</h1>
<p>Autor: Juan Navarro</p>
<button type="button" onclick="alert('¡Opción 1!')" class="button">¡Opción 1!</button>
</body>
</html>Preview:
Botón con carrito de compra.
Se tienen un efecto de carrito de compra en el botón. Para utilizar el efecto, se tiene que incluir el estilo "button1".
<button type="button" onclick="alert('¡Opción 2!')" class="button1">¡Opción 2!</button>Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link href="node_modules/boton_efecto5/button.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Botón con efectos</h1>
<p>Autor: Juan Navarro</p>
<button type="button" onclick="alert('¡Opción 2!')" class="button1">¡Opción 2!</button>
</body>
</html>Preview:
