Collection of hand-picked free HTML and CSS gradient button code examples from codepen and other resources. Update of July 2019 collection. 9 new items

Related Articles

  1. CSS Buttons
  2. CSS Button Hover Effects
  3. CSS 3D Buttons
  4. CSS Submit Buttons
  5. CSS Flat Buttons
  6. CSS Close Buttons
  7. CSS Download Buttons
  8. CSS Play/Pause Buttons
  9. CSS Button Click Effects

Author

  • Cyris

Links

Made with

  • HTML / CSS

About a code

CSS linear-gradient Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS)

About a code

Colorful Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chance Squires

Links

Made with

  • HTML / CSS

About a code

Slime

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • dxrkjoker

Links

Made with

  • HTML / CSS

About a code

Glowing Gradient Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jordan Marshall

Links

Made with

  • HTML / CSS (SCSS)

About a code

Modern Gradient Buttons

A playful set of buttons that utilize CSS gradients for fun colors and animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jesper Lauridsen

Links

Made with

  • HTML / CSS

About a code

Gradient Color Button with Hover Glow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sebastian Opperman

Links

Made with

  • HTML / CSS (SCSS)

About a code

Chroma Button

Example demonstrates the ability to use a multi-color box shadow using pseudo elements and a blur filter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nikolett Molnar

Links

Made with

  • HTML / CSS

About a code

Call us Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Silvestar Bistrović

Links

Made with

  • HTML / CSS (SCSS)

About the code

Flat Buttons

Flat buttons with smooth hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ann H.

Links

Made with

  • HTML / CSS (Sass)

About the code

Peach Beach Button

Animated button in Sass.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Cat Gradient Button Disco Cat Gradient Button Disco - GIF Demo

Author

  • Thomas Wang

Links

Made with

  • HTML / CSS

About the code

Cat Gradient Button Disco

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • 0guzhan

Links

Made with

  • HTML / CSS (SCSS)

About the code

Colorful Gradient Flex Buttons

Sweet colorful gradient flex buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Animated Gradient Button Animated Gradient Button - GIF Demo

Author

  • Oleg Frolov

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Animated Gradient Button

Pure CSS call to action button with an animated background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Rainbow Button

Author

  • lemmin

Links

Made with

  • HTML / CSS

About a code

Animated Rainbow Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Gradient Button Hover Gradient Button Hover - GIF Demo

Author

  • Muhammed Erdem

Links

Made with

  • HTML / CSS

About the code

Gradient Button Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Gradient Button Shadows

Author

  • Ben Foster

Links

Made with

  • HTML / CSS (Less)

About the code

Gradient Button Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Gradient Buttons CSS Gradient Buttons - GIF Demo

Author

  • Arturo

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

CSS Gradient Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Gradient Buttons with Background-Color Change Gradient Buttons with Background-Color Change - GIF Demo

Author

  • MrPirrera

Links

Made with

  • HTML / CSS

About the code

Gradient Buttons with Background-Color Change

A selection of gradient buttons that change the background-color when hovering. You can change the directon of the background change in the :hover state. Don't forget to then also change the background-color direction in the button itself.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Gradient Buttons Gradient Buttons - GIF Demo

Author

  • İbrahim ÖZTÜRK

Links

Made with

  • HTML / CSS

About the code

Gradient Buttons

CSS gradient buttons with Font Awesome icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Gradient Button Animations Gradient Button Animations - GIF Demo

Author

  • Zach Cole

Links

Made with

  • HTML / CSS

About the code

Gradient Button Animations

Animation buttons with background gradients. One button with a simple gradient shift on hover, and another with an infinite animation on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Gradient Button Gradient Button - GIF Demo

Author

  • Joe

Links

Made with

  • HTML / CSS (SCSS)

About the code

Gradient Button

Gradient button with subtle animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Gradient Button Gradient Button - GIF Demo

Author

  • Eric Grucza

Links

Made with

  • HTML / CSS (SCSS)

About the code

Gradient Button

Gradient button with translate on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -