Animados botones 3D en Pure CSS-Pushy-botones

Vista prévia

Descripción

Pushy-Buttons es una librería CSS que facilita la creación de botones 3D animados en la Página Web. Totalmente personalizable a través de SCSS. Disponible en 4 tallas y 3 colores.

Funcionamiento

Inserte la hoja de estilo Pushy-Buttons. CSS en la sección Head de la página HTML.

<link href="pushy-buttons.css" rel="stylesheet">

Cree los botones 3D de la siguiente manera:

<!-- Blue Buttons -->
<div>

<a class="btn btn--lg btn--blue" href="#">Button</a>

<a class="btn btn--df btn--blue" href="#">Button</a>

<a class="btn btn--md btn--blue" href="#">Button</a>

<a class="btn btn--sm btn--blue" href="#">Button</a>
</div>

<!-- Green Buttons -->
<div>

<a class="btn btn--lg btn--green" href="#">Button</a>

<a class="btn btn--df btn--green" href="#">Button</a>

<a class="btn btn--md btn--green" href="#">Button</a>

<a class="btn btn--sm btn--green" href="#">Button</a>
</div>

<!-- Red Buttons -->
<div>

<a class="btn btn--lg btn--red" href="#">Button</a>

<a class="btn btn--df btn--red" href="#">Button</a>

<a class="btn btn--md btn--red" href="#">Button</a>

<a class="btn btn--sm btn--red" href="#">Button</a>
</div>

Reemplace los estilos predeterminados en el SCSS.

// Colors
$blue: #3498db;
$green: #1abc9c;
$red: #e65d4f;

// Sizes
$large: 1.50em;
$default: 1.25em;
$medium: 1em;
$small: 0.75em;

Registro de cambios

09/23/2018

• Reescribir en estilo SCSS