Table of Contents

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ć.

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

 Demo and Code

PEACH BEACH BUTTON

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

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

 Demo and Code

CAT GRADIENT BUTTON DISCO

Made with HTML / CSS by Thomas Wang.

See the Pen
Cat Gradient Button Disco 😸🔘🎨🕺 by Thomas Wang (@thomaswangio)
on CodePen.

 Demo and Code

COLORFUL GRADIENT FLEX BUTTONS

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

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

 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.

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

 Demo and Code

GRADIENT BUTTON HOVER

Made with HTML / CSS by Muhammed Erdem.

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

 Demo and Code

GRADIENT BUTTON SHADOWS

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

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

 Demo and Code

CSS GRADIENT BUTTONS

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

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

 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.

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

 Demo and Code

GRADIENT BUTTONS

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

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

 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.

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

 Demo and Code

GRADIENT BUTTON

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

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

 Demo and Code

GRADIENT BUTTON

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

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

Demo and Code

Categorized in:

HTML,

Tagged in:

, , , , , , , , , , , ,