https://github.com/dynamicdriverepo/cssbuttonhovereffects

Eye Catching CSS button hover effects using pseudo elements
https://github.com/dynamicdriverepo/cssbuttonhovereffects

css css-framework css3 css3-animations cssbuttons hover-effects submit-button

Last synced: 3 months ago
JSON representation

Eye Catching CSS button hover effects using pseudo elements

• Host: GitHub
• URL: https://github.com/dynamicdriverepo/cssbuttonhovereffects
• Owner: dynamicdriverepo
• License: gpl-3.0
• Created: 2017-12-01T04:24:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-01T20:51:27.000Z (almost 7 years ago)
• Last Synced: 2024-05-08T09:40:14.839Z (6 months ago)
• Topics: css, css-framework, css3, css3-animations, cssbuttons, hover-effects, submit-button
• Language: CSS
• Size: 37.1 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-CSS-Resources - cssbuttonhovereffects:

README

        
# Easy CSS Button Hover Effects

Eye Catching [CSS button hover effects](http://blog.dynamicdrive.com/popular-css-button-hover-effects-explained/) using pseudo elements. Can be used on submit buttons (using `BUTTON type="submit"`) or any container elements.

![Simple CSS Button Hover Effects](css-submit-button-hover-effects.jpg?raw=true "Simple CSS Button Hover Effects")

## Usage ##

Include the .css file in the `HEAD` of your page. Then, create a button or link, and add the class `buttonfx` to create a basic "Slide Down" effect:

    Slide Down

Add one of the following classes in addition to create compounding or totally different effects:

+ `slideleft`

+ `slidebottomleft`

+ `angleinleft`

+ `curtaindown`

+ `curtainup`

+ `angleindouble`

+ `doubletake`

For example:

    Slide Corner

  

### Adding a Bounce Effect ###

To add a bounce effect to any of the above effects, add a `bouncein` class:

    Bounce Corner

And that's it!