Post thumbnail: 13 CSS Gradient Buttons

13 CSS Gradient Buttons

Collection of hand-picked free HTML and CSS gradient button code examples. Update of October 2018 collection. 3 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

  • 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: 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: -

back to top