30+ Beautiful CSS Gradient Buttons (Free Code + Demos)

Animation buttons with background gradients. One button with a simple gradient shift on hover, and another with an infinite animation on hover.

Gradient button with translate on hover

First take on newest CodePen challenge. Animated button in Sass

Call to action button with an animated background.

Everyone likes Gradients. A selection of Gradient Buttons that change the Background Color when Hovering. The direction can be set in the CSS (see comment or check the JS-Panel for Instruction)

A playful set of buttons that utilize CSS gradients for fun colors and animations.

A simple CSS-only button with smoothly changing gradients when hovered.

Background gradient button with CSS transitions to make it more sexy

I redesign the ghost button of my website. It's a possible way for my next website design. Visible on http://marcel-pirnay.be/ //!\ text gradient will broke on outdated browsers \

Based on Vimeo redesign concept by Fayaz Mohamed https://www.behance.net/mfayax

Practicing with Flexbox, and some effects & gradient styles.

featuring theming thanks to nested sass maps

This is a customizable gradient button built in SCSS or Sass. I used CSS loop technique through the Sass map, so that I could shorten the Sass source code. The gradient is animated by just moving the x-axis background position, 100% to the left. This comes with 3 styles: Normal Rounded ...

Read More

Beautiful looking button with background-gradient on hover.