https://github.com/knowankit/hoveron
🎨 A CSS file to animate buttons on hover
https://github.com/knowankit/hoveron
animations bootstrap css hover hover-effects
Last synced: 5 months ago
JSON representation
🎨 A CSS file to animate buttons on hover
- Host: GitHub
- URL: https://github.com/knowankit/hoveron
- Owner: knowankit
- License: mit
- Created: 2019-04-14T18:08:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-28T18:02:40.000Z (over 5 years ago)
- Last Synced: 2025-05-31T08:58:23.149Z (5 months ago)
- Topics: animations, bootstrap, css, hover, hover-effects
- Language: CSS
- Homepage:
- Size: 986 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hover-on.css  
**Bootstrap** button classes are supported, pure css animation
`hover-on.css` has creative animations and transitions for your projects. It's great to make your buttons look awesome.
## Installation
### Install via npm:
`$ 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
```
or Import the `scss` file in your main sass file.
```scss
@import "~hover-on/source/hover-on.scss";
```
or use a CDN version by [jsDelivr](https://cdn.jsdelivr.net/npm/hover-on/hover-on.css)
```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 2d animation classes which are `pop`, `push`, `float` etc.
## Demo
[Click here](https://hover.knowankit.com/)