Animated 3D Buttons In Pure CSS – pushy-buttons

Preview:

Description:

pushy-buttons is a CSS library that makes it easy to create animated 3d buttons on the webpage. Fully customizable via SCSS. Available in 4 sizes and 3 colors.

How to use it:

Insert the stylesheet pushy-buttons.css in the head section of the html page.

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

Create the 3D buttons as follows:

<!-- 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>

Override the default styles in the SCSS.

// Colors
$blue: #3498db;
$green: #1abc9c;
$red: #e65d4f;
// Sizes
$large: 1.50em;
$default: 1.25em;
$medium: 1em;
$small: 0.75em;

Changelog:

09/23/2018

• Rewrite in SCSS style