CSS3 ‘Whoosh’ and ‘Whiw’ hover button effects

I don’t really know what to call them so I just named them after what I thought the effects would sound like, if CSS had audio. The hover idea came to me yesterday and I thought that it would be nice to try out using only CSS. So I got to my laptop and made primary use of the pseudo-element ‘before’ to make these possible.

Feel free to play with the design of each button!

HTML

CSS

Output

See the Pen Some button hover effects by Elmer Balbin (@elmzarnsi) on CodePen.27172

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Elmer Balbin

Web developer from Bacolod, Google Local Guide, and casual DotA 2 player.

about me

Leave a comment

avatar