Top 13 CSS Gradient Buttons

Collection of hand-picked free HTML and CSS gradient button code examples.

FLAT BUTTONS

Flat buttons with smooth hover effect. Made with HTML / CSS (SCSS) by Silvestar Bistrović.

 Demo and Code

PEACH BEACH BUTTON

Animated button in Sass. Made with HTML / CSS (Sass) by Ann H..

 Demo and Code

CAT GRADIENT BUTTON DISCO

Made with HTML / CSS by Thomas Wang.

 Demo and Code

COLORFUL GRADIENT FLEX BUTTONS

Sweet colorful gradient flex buttons. Made with HTML / CSS (SCSS) by 0guzhan.

 Demo and Code

ANIMATED GRADIENT BUTTON

Pure CSS call to action button with an animated background. Made with HTML (Pug) / CSS (Stylus) by Oleg Frolov.

 Demo and Code

GRADIENT BUTTON HOVER

Made with HTML / CSS by Muhammed Erdem.

 Demo and Code

GRADIENT BUTTON SHADOWS

Made with HTML / CSS (Less) by Ben Foster.

 Demo and Code

CSS GRADIENT BUTTONS

Made with HTML (Pug) / CSS (Stylus) by Arturo.

 Demo and 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. Made with HTML / CSS by MrPirrera.

 Demo and Code

GRADIENT BUTTONS

CSS gradient buttons with Font Awesome icons. Made with HTML / CSS by İbrahim ÖZTÜRK.

 Demo and 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. Made with HTML / CSS by Zach.

 Demo and Code

GRADIENT BUTTON

Gradient button with subtle animations. Made with HTML / CSS (SCSS) by Joe.

 Demo and Code

GRADIENT BUTTON

Gradient button with translate on hover. Made with HTML / CSS (SCSS) by Eric Grucza.

Demo and Code