Hover-on.css !npm !npm bundle size

Bootrap button supported, pure css animation

hover-on.css has creative animations and transitions for your projects. It's great to make your buttons look awesome.

!Hover gif

Installation

$3

$ npm install hover-on

Usage

To use hover-on.css in your website, just add the stylesheet into your document's , add the appropriate class to the button. That's it! You've got a animated button. Cool!

``html



`

Import the scss file in your main sass file.

`scss
@import "~hover-on/hover-on.css";
`

or use a CDN version by jsDelivr

`html



`

Animations

| Class Name | | |
| -------------- |:-----------------: | --------------: |
| both-line | bottom-line | top-line |
| fill-left | fill-right | fill-top |
| fill-bottom | fill-both | fill-both2 |
| fill-skew-left | fill-skew-right | shine |
| grow | shrink | pulse |
| pulse-grow | pulse-shrink | push |
| pop | bounce-in | bounce-out |
| rotate | rotate-grow | float |
| sink | bob | hang |
| skew | wobble-skew | forward |
| backward | shadow | |

For example:

`html
Warning
`
In the above example btn is from bootstrap classes and fill-bottom-warning is from the hover-on.

Important! It's necessary to suffix the class name with bootstrap color name like fill-both-primary. You don't need to add any suffix in the 2d animation class which are pop, push, float` etc.

Demo

Click here