40+ Creative CSS Button Hover Effects [Free Code + Demos]

Enjoy this 100% free and open-source collection of HTML and CSS button hover effect code examples. These CSS Button hovers will make your buttons look awesome.

1. Button Hover Effects With Box-shadow

CSS Button Hover Effects - Button hover effects with box-shadow
Making some basic animations with box-shadows. No extra elements or even pseudo elements required. Check out my button collection for more.
Author: Giana (giana)
Created on: June 4, 2017
Made with: HTML, SCSS
Tags: css, buttons, hover, animation, css-variables

2. Gradient Hover Animated Button | Welcome In My World

CSS Button Hover Effects - Gradient hover animated button | Welcome in my world
I redesign the ghost button of my website. It's a possible way for my next website design. Visible on http://marcel-pirnay.be/ //!\ text gradient will broke on outdated browsers \
Author: Marcel Pirnay (mars2601)
Created on: January 27, 2016
Made with: HTML, CSS
Tags: button, hover, gradient, background, ghost

3. Animated Button With Rainbow Hover

CSS Button Hover Effects - Animated Button With Rainbow Hover
Author: Thiago Marques (althi)
Created on: June 6, 2018
Made with: HTML, CSS
Tags: pride, button pride, lgbt, css-pure

4. Stylized Buttons

CSS Button Hover Effects - Stylized Buttons
Author: Paraskevas Dinakis (perry_nt)
Created on: February 28, 2018
Made with: HTML, CSS
Tags: serif, button, stylized

5. Buttons + SVG Trianglify

CSS Button Hover Effects - Buttons + SVG trianglify
Buttons with SVG patterns that move on hover
Author: Mikael Ainalem (ainalem)
Created on: March 5, 2018
Made with: HTML, CSS, JS
Tags: buttons, hover, trianglify, triangles, generated

6. Click Me (CSS Button Hover Effect)

CSS Button Hover Effects - Click Me (CSS Button Hover Effect)
Author: Andreas Storm (andreasstorm)
Created on: April 16, 2018
Made with: HTML, Sass
Tags: button

7. UI Button W/ Mix-Blend-Mode

CSS Button Hover Effects - UI Button W/ Mix-Blend-Mode
Experimenting with the CSS mix-blend-mode property. Only supported on Chrome and Firefox browsers
Author: Daniel Gonzalez (dan10gc)
Created on: February 15, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

8. Only CSS Animated Border Button

CSS Button Hover Effects - Only CSS animated border button
Button with animated border on hover
Author: PineappleSyrup (pineappleSyrup)
Created on: July 6, 2019
Made with: HTML, SCSS
Tags: animated border, border-animation, only-css, animation

9. Stripped Diagonal Button Single Border

CSS Button Hover Effects - Stripped Diagonal Button Single Border
Author: Zeindelf (Zeindelf)
Created on: July 13, 2017
Made with: HTML, SCSS

10. An Animated Blobby Gooey Button

CSS Button Hover Effects - An Animated Blobby Gooey Button
it's just a button though. disclaimer: works in chrome. not sure about other browsers
Author: Leena Lavanya (leenalavanya)
Created on: February 20, 2019
Made with: HTML, SCSS
Tags: cpc-blob, codepenchallenge

11. Button Effects

CSS Button Hover Effects - Button effects
Author: Emanuel Gonçalves (Emanuel_G)
Created on: May 19, 2017
Made with: HTML, Sass

12. CSS-Mask Button Hover Animation ( Experimental )

CSS Button Hover Effects - CSS-Mask Button Hover Animation ( Experimental )
Made this sprite animation on button with hover effect for triggering the frame's , inspired by this codrop article https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/
Author: Yugam (pizza3)
Made with: HTML, SCSS

13. Flip Button

CSS Button Hover Effects - Flip Button
Author: Andreas Storm (andreasstorm)
Created on: May 3, 2017
Made with: HTML, Stylus
Tags: flip, button

14. Sass Button Border Hover Effect Mixin

CSS Button Hover Effects - Sass button border hover effect mixin
A mixin from my other pen, CSS border transitions. See also another effect drawing each border individually. Check out my button collection for more.
Author: Giana (giana)
Created on: May 5, 2017
Made with: HTML, SCSS

15. Cool Beans Button 60fps

CSS Button Hover Effects - 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. Read this to learn about smooth 60fps animations also, comment out overflow hidden on line 21 to se...
Read More
Author: BROWNERD (brownerd)
Created on: August 17, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug

16. Upload Button Hover

CSS Button Hover Effects - Upload button hover
Author: Aaron Iker (aaroniker)
Created on: March 8, 2020
Made with: HTML, SCSS, JS

17. Animation Button#3-hover Effect

CSS Button Hover Effects - animation button#3-hover effect
practice for hover style! enjoy!
Author: lichinlin (lichin-lin)
Created on: July 22, 2016
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: color, hover, pokemon, button, animation

18. Animation Button#2

CSS Button Hover Effects - animation button#2
button animation practice.
Author: lichinlin (lichin-lin)
Created on: April 21, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: button, animation, color, linear-gradient

19. Button Explore

CSS Button Hover Effects - Button Explore
Just a kind of experimental button transition.
Author: Nicolas Lanthemann (vanderlanth)
Created on: June 28, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: button, transition, explore, hover, link

20. Animated SVG Hover Buttons

CSS Button Hover Effects - 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.
Author: Tyler Peterson (Gingernaut)
Created on: November 17, 2015
Made with: HTML, CSS
Tags: svg, css, hover, button

21. Slide Text On Hover Animation

CSS Button Hover Effects - Slide text on hover animation
Just a quick example of a simple button animation
Author: Mads Håkansson (madshaakansson)
Created on: May 16, 2014
Made with: HTML, CSS
Tags: button, animation, css, quick

22. Star Trek LCARS-style Ghost Buttons

CSS Button Hover Effects - 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. The left and right values define the numerator and denominator of the bo...
Read More
Author: Cobey Potter (courcelan)
Created on: March 19, 2015
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
Tags: buttons, transitions, interface

23. CSS Button With Bubbles

CSS Button Hover Effects - CSS button with bubbles
Made this forever ago for a client website.
Author: Giana (giana)
Created on: December 14, 2018
Made with: HTML, SCSS
Tags: codepenchallenge, cpc-water, css, button, animation

24. CSS Button Hover Effect

CSS Button Hover Effects - CSS button hover effect
Author: Julia (sfoxy)
Created on: February 14, 2017
Made with: HTML, CSS
Tags: button, hover, simple, design, material

25. Sass Button Border Hover Effect Mixin

CSS Button Hover Effects - Sass button border hover effect mixin
A mixin from my other pen, CSS border transitions. See also another effect drawing each border individually. Check out my button collection for more.
Author: Giana (giana)
Created on: May 5, 2017
Made with: HTML, SCSS

26. Button Hover Effects

CSS Button Hover Effects - Button Hover Effects
Some button hover effects using psuedo elements and borders.
Author: Kyle Brumm (kjbrum)
Created on: November 23, 2014
Made with: HTML, SCSS, JS
Tags: buttons, hover, css3, border, animation

27. Collection Of Button Hover Effects

CSS Button Hover Effects - Collection of Button Hover Effects
A few examples of flashy hover effects. Currently updating this pen. Work in Progress
Author: David Conner (davidicus)
Created on: January 11, 2015
Made with: HTML, SCSS
Tags: css, transition, hover, effects

28. Demo:CSS Scroll Down Button

CSS Button Hover Effects - demo:CSS scroll down button
Article - https://www.nxworld.net/tips/css-scroll-down-button.html
Author: Naoya (nxworld)
Created on: September 24, 2015
Made with: HTML, CSS, JS
Tags: css, demo

29. Button Hover Animations

CSS Button Hover Effects - Button Hover Animations
A set of button hover animations.
Author: Akshay Nair (phenax)
Created on: August 23, 2015
Made with: HTML, SCSS, JS
Tags: button, hover

30. Cool Beans Button 60fps

CSS Button Hover Effects - 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. Read this to learn about smooth 60fps animations also, comment out overflow hidden on line 21 to se...
Read More
Author: BROWNERD (brownerd)
Created on: August 17, 2016
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug

31. Simple Button Hover

CSS Button Hover Effects - Simple Button Hover
Simple multi layer box shadow hover effect.
Author: magnificode (magnificode)
Created on: August 21, 2015
Made with: HTML, SCSS
Tags: button, hover, box-shadow

32. Animation Button#3-hover Effect

CSS Button Hover Effects - animation button#3-hover effect
practice for hover style! enjoy!
Author: lichinlin (lichin-lin)
Created on: July 22, 2016
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: color, hover, pokemon, button, animation

33. SKYPE BUBBLE BUTTON

CSS Button Hover Effects - SKYPE BUBBLE BUTTON
Author: Hugh Balboa (hughbalboa)
Created on: August 14, 2017
Made with: HTML, CSS

34. Ghost Button CSS

CSS Button Hover Effects - Ghost Button CSS
Create a very simple & minimal Ghost Button with CSS. We will be using just CSS to style our ghost button. We will also add simple hover effects to make our Ghost button give visual feedback to user when pressed.
Author: Kanishk Kunal (kanishkkunal)
Created on: November 8, 2014
Made with: HTML, CSS
Tags: ghost, buttons, css, minimal, flat

35. Button Hover Effects

CSS Button Hover Effects - Button Hover Effects
Awesome button hover effects
Author: Wisnu ST (wisnust10)
Created on: March 2, 2016
Made with: HTML, CSS
Tags: button, hover, flat, material design