Animated/Interactive Web Button Library – Hover-Buttons

Preview:

Description:

Hover-Buttons is a pure CSS/SCSS library used to create animated, customizable, interactive web action buttons with cool fill and border transitions on hover.

How to use it:

Install it with NPM:

npm install

Or include the main CSS file ‘hoverbuttons.css’ on the webpage.

<link rel="stylesheet" href="hoverbuttons.css">

Add the CSS classes to the desired buttons & links within the document.

<a href="#" class="hbtn hb-fill-right-rev hpill">Reveal Right</a>
<a href="#" class="hbtn hb-border-bottom2 hbor4">Fade Bottom</a>
...

Override the default variables in the SCSS:

//Border width
$btnborder: 2px;
//Border and fill color
$btncolor: #ffffff;
//Button text color
$txtcolor: #ffffff;
//Alternative button text color for background transitions
$txtcolorfill: #000000;
//Button Padding
$paddingY: 8px;
$paddingX: 20px;