Top 12 CSS Gradient Buttons

FLAT BUTTONS

Flat buttons with smooth hover effect.

See the Pen Flat Buttons With Smooth Hover Effect by Silvestar Bistrović (@CiTA) on CodePen.

PEACH BEACH BUTTON

Animated button in Sass.

See the Pen Peach Beach Button by Ann H. (@merkund) on CodePen.

COLORFUL GRADIENT FLEX BUTTONS

Sweet colorful gradient flex buttons.

See the Pen 💐 Colorful Gradient Flex Buttons 💐 by 0guzhan (@0guzhan) on CodePen.

ANIMATED GRADIENT BUTTON

Pure CSS call to action button with an animated background.

See the Pen Animated gradient button [pure css] by Oleg Frolov (@Volorf) on CodePen.

GRADIENT BUTTON HOVER

See the Pen Gradient Button Hover by Muhammed Erdem (@JavaScriptJunkie) on CodePen.

GRADIENT BUTTON SHADOWS

See the Pen Gradient button shadows by Ben Foster (@benfoster) on CodePen.

CSS GRADIENT BUTTONS

See the Pen Gradient buttons by Arturo (@arturoalviar) on CodePen.

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.

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.

GRADIENT BUTTONS

CSS gradient buttons with Font Awesome icons.

See the Pen Gradient buttons by İbrahim ÖZTÜRK (@ibrahimozturkme) on CodePen.

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.

See the Pen Gradient Button Animations by Zach Cole (@zachacole) on CodePen.

GRADIENT BUTTON

Gradient button with subtle animations.

See the Pen Gradient button with subtle animations. by Joe (@dope) on CodePen.

GRADIENT BUTTON

Gradient button with translate on hover.

See the Pen Gradient Button by Eric Grucza (@egrucza) on CodePen.