Who doesn’t like styling buttons and hover effects using CSS? A button means action. Clicking or tapping on one lets you do things. HTML buttons are an essential element of interaction design. That’s why they’re so important and that’s why it’s good to get them right.
So when I have to design buttons and their hover animations, I like to look around for some inspiration first. My all-time favorite place to do that is CodePen. Here’s a list of CSS button hover effects I put together to get you started. I hope you enjoy!
CSS Submit Button Hover Effects
Easy but eye catching CSS submit buttons hover effects, by animating the “:before” and “:after” pseudo elements.
See the Pen CSS Submit Button Hover Effects by georgec (@georgec) on CodePen.
CSS Button Hover Effects
Four CSS hover button examples containing neon effect, angle background effect, shadow effect and pulse effect.
See the Pen CSS Button Hover Effects by woolandcotton (@woolandcotton) on CodePen.
Button Hover Effects
I created eight pure CSS button hover effects with box-shadow. Each button has its own unique effect applied to it. I mainly used box-shadow to create the effects, but I also incorporated effects like letter-spacing and border-radius to give more dynamic contrast in the animations.
See the Pen Button Hover Effects by samflickgraphics (@samflickgraphics) on CodePen.
Three Simple CSS Button Hover Effects
Three CSS button hover animations with cool transitions.
See the Pen Three Simple CSS Button Hover Effects by rauldronca (@rauldronca) on CodePen.
Ghost Button Animation
This was something I quickly created based of a Dribbble shot by Nikola Popovic.
See the Pen Ghost Button Animation by wintr (@wintr) on CodePen.
Gradient Hover Animated Button
I redesign the ghost button of my website. It’s a possible way for my next website design.
See the Pen Gradient Hover Animated Button by mars2601 (@mars2601) on CodePen.
Amy Winehouse Doc Button
I’ve been wanting to make this button for a long time, and finally got around to it.
See the Pen Amy Winehouse Doc Button by egrucza (@egrucza) on CodePen.
Six Pure CSS Button Hover Animations
Six awesome button animations using only pure CSS3.
See the Pen Six Pure CSS Button Hover Animations by CTNieves (@CTNieves) on CodePen.
Animated Ghost Button
A cool ghost-like CSS button animation made to use in your website.
See the Pen Animated Ghost Button by numerical (@numerical) on CodePen.
Button Hover Animations
A set of button hover animations.
See the Pen Button Hover Animations by phenax (@phenax) on CodePen.
Button.css: CSS3 Button Animations
A collection of CSS3 button animations.
See the Pen Button.css: CSS3 Button Animations by kevinfan23 (@kevinfan23) on CodePen.
8-bit CSS Hovers
8-bit inspired button hover effects.
See the Pen 8-bit CSS Hovers by tstoik (@tstoik) on CodePen.
Animated SVG Hover Buttons
A lot of people liked the buttons I made for my website so I threw together a CodePen and added comments. This is pure HTML/CSS implementation of some SVG buttons with a cool hover effect. The colors and shapes can be customized to fit your needs.
See the Pen Animated SVG Hover Buttons by Gingernaut (@Gingernaut) on CodePen.
Box/Button Hovers
HTML/CSS box and button hovers effects.
See the Pen Box/Button Hovers by andrewwierzba (@andrewwierzba) on CodePen.
Button Explore
Just a kind of experimental button transition.
See the Pen Button Explore by vanderlanth (@vanderlanth) on CodePen.
Button Hover States
Snazzy CSS hover states for a button.
See the Pen Button Hover States by thejamespower (@thejamespower) on CodePen.
Animation Button
Seven beant button animation practice based on CSS backgrounds.
See the Pen Animation Button by lichin-lin (@lichin-lin) on CodePen.
OK CSS Button
CSS hover effect on animation icons.
See the Pen OK CSS Button by fixcl (@fixcl) on CodePen.
Cool Beans Button 60fps
We can easily make our animated buttons more performant. Use transforms and opacity for animations only. Then use “will-change: transform;” to let the browser know what animations lie ahead.
See the Pen Cool Beans Button 60fps by brownerd (@brownerd) on CodePen.
Button Animation Experiment
Another quick pen of button animation based on a Dribbble post I liked by Daniel Jecha.
See the Pen Button Animation Experiment by wintr (@wintr) on CodePen.
Gaming Button With Hover Effect
A button I built for a game website, bars slide from left to right on hover.
See the Pen Gaming Button With Hover Effect by kaigth (@kaigth) on CodePen.
Colorful CSS Buttons
A collection of various types of CSS buttons in various colors.
See the Pen Colorful CSS Buttons by chrisdothtml (@chrisdothtml) on CodePen.
Collection of Button Hover Effects
A few examples of flashy button hover effects. Currently updating this pen. Work in Progress …
See the Pen Collection of Button Hover Effects by davidicus (@davidicus) on CodePen.
Blobs button
Originally I found this button on this site – https://isl.co/ and recreated it.
See the Pen Blobs button by suez (@suez) on CodePen.
Animate CSS Button
A neat and simple button mouse over effect.
See the Pen Animate CSS Button by dicson (@dicson) on CodePen.
Half Fuller Buttons
I really liked the buttons on this Behance post, so I wanted to try and make some for my site. They are wicked cool.
See the Pen Half Fuller Buttons by half-fuller (@half-fuller) on CodePen.
Contact Button
Contact button from Dribbble shot using only CSS.
See the Pen Contact Button by ajerez (@ajerez) on CodePen.
Simple Button Hover
Simple multi-layer box shadow hover effect on a button.
See the Pen Simple Button Hover by magnificode (@magnificode) on CodePen.
Button Hover Effects
Some button hover effects using psuedo elements and borders.
See the Pen Button Hover Effects by kjbrum (@kjbrum) on CodePen.
Button Outline Animation On Hover
Inspired by the “Learn More” buttons found here: http://kenjiendo.com/news/
See the Pen Button Outline Animation On Hover by egrucza (@egrucza) on CodePen.
Animation Button Hover Effect
A Pokemon GO inspired CSS button hover style made for practice.
See the Pen Animation Button Hover Effect by lichin-lin (@lichin-lin) on CodePen.
Star Trek LCARS-style Ghost buttons
For one of our latest project with a local information security firm, we went with a tech theme. These buttons are inspired by the computer interface seen in Star Trek with a bit of added transition effects on hover.
See the Pen Star Trek LCARS-style Ghost buttons by courcelan (@courcelan) on CodePen.
Animated CSS3 Buttons
Experimental CSS buttons by Designify.me
See the Pen Animated CSS3 Buttons by sazzad (@sazzad) on CodePen.
CSS Interactive Buttons
Inspiration for new ways to make interactive buttons using linear-gradients, box-shadows, and pseudo classes!
See the Pen CSS Interactive Buttons by derekmorash (@derekmorash) on CodePen.
Animated Gradient Ghost Button Concept
Ghost button. Animated gradient borders and text. Transparent background. CSS line drawing animation. Clip-path frame. No SVG. Pure CSS.
See the Pen Animated Gradient Ghost Button Concept by ARS (@ARS) on CodePen.
Slide Text On Hover Animation
Just a quick example of a simple button animation.
See the Pen Slide Text On Hover Animation by madshaakansson (@madshaakansson) on CodePen.
Button Bubble Effect
A hover effect using the gooey tricks.
See the Pen Button Bubble Effect by Grsmto (@Grsmto) on CodePen.