Submit your widget

Multiple CSS3 powered hover effects

Created about a year ago   Views 5927   downloads 1677    Author IanLunn
Multiple CSS3 powered hover effects
View DemoDownload 701.1 KB
24
Share |

This is a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.

If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download css/hover.css in its entirety.

Assuming you want to use the Grow effect:

 

  1. Download Hover.css
  2. In css/hover.css, find the Grow CSS (each effect is named using a comment above it):

    /* Grow */
    .hvr-grow {
        display: inline-block;
        vertical-align: middle;
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        transition-duration: 0.3s;
        transition-property: transform;
    }
    
    .hvr-grow:hover,
    .hvr-grow:focus,
    .hvr-grow:active {
        transform: scale(1.1);
    }

Read more:https://github.com/IanLunn/Hover

Tag: button