21 Awesome CSS Gradient Buttons 2025

April 11, 2025

Buttons are a fundamental part of any website. However, now buttons are available in various designs, one of which is CSS Gradient Buttons. Gradient buttons add depth, vibrancy, and a modern touch to your UI without requiring images or additional assets.

Gradient button 3

Three rounded buttons are horizontally aligned against a white background. Each button has a different subtle gradient fill.

Preview

Codepen Code

Author: Rita Huang

Published: March 14, 2025

Made With: HTML, CSS

Bouton fond transparent

A light gray background with a rectangular button in the center. The button has a white fill, rounded corners, and a thin outline that transitions from purple to blue.

Preview

Codepen Code

Author: remibwa

Published: March 12, 2025

Made With: HTML, CSS

TP | Gradient Button

A dark background with a rounded rectangular button in the center.

Preview

Codepen Code

Author: João Jesus

Published: March 13, 2025

Made With: HTML, CSS (SCSS)

Glowing gradient button

A rectangular button with rounded corners is centered against a dark background. The button has a gradient fill transitioning from light blue on the left to pink on the right.

Preview

Codepen Code

Author: crstnmac

Published: June 7, 2019

Made With: HTML, CSS

Chroma Button

This pen demonstrates the ability to use a multi-color box shadow using pseudo elements and a blur filter. Inspired by Razor's chroma colors.

Preview

Codepen Code

Author: Sebastian Opperman

Published: April 29, 2019

Made With: HTML, CSS (SCSS)

Colorful Gradient Flex Buttons

Four rounded rectangle buttons are vertically stacked against a white background. Each button has a different gradient color.

Preview

Codepen Code

Author: 0guzhan

Published: September 15, 2018

Made With: HTML, CSS

Flat Buttons With Smooth Hover Effect

Four rounded rectangular buttons are stacked vertically on a white background. Each button has a distinct color and text.

Preview

Codepen Code

Author: Silvestar Bistrović

Published: February 4, 2019

Made With: HTML, CSS (SCSS)

Animated gradient button [pure css]

Pure CSS call to action button with an animated background.

Preview

Codepen Code

Author: Oleg Frolov

Published: March 28, 2018

Made With: HTML (Pug), CSS (Stylus)

Gradient Button Hover

A collection of rounded rectangle buttons with various gradient fills.

Preview

Codepen Code

Author: Muhammed Erdem

Published: April 26, 2017

Made With: HTML, CSS

Gradient button shadows

Each button has a different gradient color scheme.

Preview

Codepen Code

Author: Ben Foster

Published: April 5, 2017

Made With: HTML, CSS (Less)

Gradient Buttons with Background-Color Change (CSS-only)

Everyone likes Gradients. A selection of Gradient Buttons that change the Background Color when Hovering.

Preview

Codepen Code

Author: MrPirrera

Published: February 28, 2017

Made With: HTML, CSS

Gradient button with subtle animations

The button is a rounded rectangle with an orange-to-yellow gradient fill.

Preview

Codepen Code

Author: Joe

Published: July 30, 2015

Made With: HTML, CSS (SCSS)

Peach Beach Button

First take on newest CodePen challenge. Animated button in Sass.

Preview

Codepen Code

Author: Ann H.

Published: January 9, 2019

Made With: HTML, CSS (Sass)

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.

Preview

Codepen Code

Author: Zach Cole

Published: November 7, 2015

Made With: HTML, CSS

CSS Gradient buttons multi effects

A collection of CSS gradient buttons arranged in a grid-like layout on a light gray background.

Preview

Codepen Code

Author: superwtt

Published: August 10, 2020

Made With: HTML, CSS

CSS Gradient Buttons Multi colors

Gradient Buttons Multi colors and multi size.

Preview

Codepen Code

Author: cssmoz

Published: March 18, 2020

Made With: HTML, CSS

CSS gradient buttons (different effects)

Gradient buttons different hover effects.

Preview

Codepen Code

Author: kitsch-code

Published: June 25, 2021

Made With: HTML, CSS

CSS Gradient Buttons

Multiple buttons and multiple colors.

Preview

Codepen Code

Author: burakcanince

Published: March 2, 2019

Made With: HTML, CSS (SCSS)

Gradient Button

Each button has a rounded rectangle shape and a different vibrant gradient color.

Preview

Codepen Code

Author: Manu

Published: April 1, 2019

Made With: HTML, CSS

CSS Gradient Buttons Hover Effects

Multiple CSS Gradient Buttons with hover effects.

Preview

Codepen Code

Author: Diego Alvarez

Published: October 21, 2019

Made With: HTML, CSS

Css Gradient Buttons

Basic Css Buttons with Gradient Color animation on hover.

Preview

Codepen Code

Author: Siddhant Singh

Published: August 28, 2022

Made With: HTML, CSS