sennus • Hover Animations v1.0 • 2018

A collection of only CSS3 powered hover effects & animations to be applied to buttons, anchor-tags(links), image overlays, featured images, logos, icons, and other elements. Use as provided or feel free to modify to your hearts content. Dont forget to credit me, if you find this repository helpful.

github Fork / Download on github!

Border Effects (Buttons)

                    <p>Button-Class</p><button class="button button-class">FX-Name</button>

RoundOff

Hollow

Border-Fade

Border-Growth

Border-Bot

Border-Bot-L2R

Border-Bot-R2L

Border-Bot-center

Border-Top

Border-Top-L2R

Border-Top-R2L

Border-Top-center

Left-Border-Travel-L2R

Right-Border-Travel-R2L

Border-Grow-Out

Border-Grow-In

Background Effects (Buttons)

                    <p>Button-Class</p><button class="button button-class">FX-Name</button>

BG-Color-Fade

BG-Gradient-Fade

BG-Swipe-Right

BG-Swipe-Left

BG-Swipe-Top

BG-Swipe-Bot

Swipe-From-Center

Swipe-V-From-Center

Grow-From-Center

Shrink-To-Center

Glaze-From-Left

Glaze-From-Right

Ribbon-From-Left

Ribbon-From-Right

Hover Effects (Anchor Tags)

                    <a class="Anchor-Tag-Class" href="#!">FX-Name</a>

Hover Effects (Image)

                        <div class="img-box"><p>Image-Class</p><img class="Image-Class" src=""></div>
Round-Border
Round-&-Grow
Squaricle
Squaricle-&-Grow
Flip-Vertical
Flip-Horizontal
Flip-Diagonal
Depth

Hover Effects (Image Overlay)

Drop-Down
Drop Down!
Float-Right
Float Right!
Rise-Up
Rise Up!
Float-Left
Float Left!!
Scale-Up
Scale Up!
Fade
Fade!