Animated/Interactive Web Button Library – Hover-Buttons

Category: CSS & CSS3 , Recommended | August 9, 2017
Author: Varin6
Views Total: 315
Official Page: Go to website
Last Update: August 9, 2017
License: MIT

Preview:

Animated/Interactive Web Button Library – Hover-Buttons

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;