Animated/Interactive Web Button Library – Hover-Buttons

Category: CSS & CSS3 , Recommended | August 9, 2017
Views Total:498 views
Official Page:Go to website
Last Update:August 9, 2017


Animated/Interactive Web Button Library – Hover-Buttons


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;

You Might Be Interested In:

Leave a Reply