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

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

Made with

  • HTML / CSS (SCSS)

About a code

Colorful Buttons

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

Responsive: no

Dependencies: -

Author

  • Chance Squires

Made with

  • HTML / CSS

About a code

Slime

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

Responsive: yes

Dependencies: -

Author

  • dxrkjoker

Made with

  • HTML / CSS

About a code

Glowing Gradient Button

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

Responsive: no

Dependencies: -

Author

  • Jordan Marshall

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

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

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

Made with

  • HTML / CSS

About a code

Call us Button

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

Responsive: no

Dependencies: -

Author

  • Silvestar Bistrović

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.

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

Made with

  • HTML / CSS

About the code

Cat Gradient Button Disco

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

Dependencies: -

Author

  • 0guzhan

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

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

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS (SCSS)

About the code

Gradient Button

Gradient button with translate on hover.

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

Dependencies: -