50 CSS Gradient Button Examples

An agglomeration of the top free CSS gradient button code examples. This diverse collection of CSS gradient buttons are each unique in their own way in terms of design and implementation both aesthetically and code wise. Browse through to find a gradient button that you would like to implement in your web development application.

css gradient buttons featured

Hover to play
Title:

Gradient button with background color change

Author:

MrPirrera

Created on:

February 28, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful gradient buttons created using pure HTML and CSS. When you hover over the button, it shows a smooth animation changing the color gradient. Linear gradient animations are shown with different color palettes.

Hover to play
Title:

Animated gradient button using pure css

Author:

Oleg Frolov

Created on:

May 20, 2018

Made with:

HTML(Pug), CSS (Stylus)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A gradient button with infinite animation is created using Pug and Stylus for markup. Animations are shown with keyframes in CSS. A beautiful gradient shadow is given to the button to make it more attractive.

Hover to play
Title:

Animated pastel gradient button

Author:

Katia De Juan

Created on:

February 01, 2019

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A card component with a gradient button is created using HTML and SCSS. SCSS code is organized with variables and comments. When you hover over the button, it looks cool with a gradient animation.

Hover to play
Title:

Gradient button hover

Author:

Muhammed Erdem

Created on:

August 07, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, multicolored gradient buttons with different color pallets are created in pure HTML and CSS. Each button has a shadow that looks beautiful. When you hover over the button, it shows smooth animation with a gradient colors.

Hover to play
Title:

Rise spin sweep gradient buttons

Author:

JamieKDonnelly

Created on:

February 12, 2019

Made with:

HTML, SCSS, Jquery

Responsive:

No

Dependencies:

jQuery, Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, three different types of gradient buttons with amazing hover effects is created using HTML and Sass. The buttons shows rising, spinning and sweeping effects when you hover over them.

Hover to play
Title:

Glowing gradient button animation

Author:

Denis

Created on:

May 31, 2021

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A glowing button with gradients is created using pure HTML and CSS. When you hover over the button, it will create an amazing glow effect with a shining shadow to catch user attention.

Hover to play
Title:

Gradient hover animated button

Author:

Marcel Pirnay

Created on:

January 28, 2016

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant, animated button with gradient in the text and button border is created using pure HTML and CSS. When you hover over the buttons, it will show animations on the button border to give a very rich look to the button.

Hover to play
Title:

Animated gradient ghost button

Author:

Arsen Zbidniakov

Created on:

April 05, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An animated ghost gradient transparent button is created using HTML and SCSS. Button looks beautiful with the transparent background and line drawing animation. This button animates with a gradient colors for the infinite time.

Hover to play
Title:

Animated gradient ghost button golden

Author:

Fazlur Rahman

Created on:

October 15, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An animated gradient transparent button with golden color is created using HTML and Sass without SVG. When you hover over the button, it fills the background color which catches attention of a user.

Hover to play
Title:

Button bubble effect

Author:

Adrien Grsmto

Created on:

December 14, 2016

Made with:

HTML, SCSS, Jquery

Responsive:

No

Dependencies:

jQuery, Sass

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A multicolor gradient button with an animated bubble effect is created using HTML, SCSS, jQuery. When you hover over the button, a random color bubble pops out from the left top corner and right bottom corner to give an amazing effect to the button.

Hover to play
Title:

Pure css button hover glow effect

Author:

Leandro Simoes

Created on:

December 07, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish button with gradient shadow is shown on the hovering effect with a smooth transition. It is created using HTML and Pure CSS. When you click on the button, it will animate the background of the button with the multicolor gradient.

Hover to play
Title:

Blobs button with gradient

Author:

imvisrut

Created on:

October 14, 2021

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish button with animated blobs is created using HTML and SCSS. When you hover over the button, it shows the beautiful blobs with a liquid like effect in blue color making the button looks amazing.

Hover to play
Title:

Blobs gradient button

Author:

imvisrut

Created on:

October 14, 2021

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful button in sea green color with a bordered shadow is created using HTML and SCSS. When you hover over the button, a blob like animating effects are shown to make button look awesome.

Hover to play
Title:

Animated morphing social buttons

Author:

Mark Mead

Created on:

December 07, 2020

Made with:

HTML, SCSS, react JS

Responsive:

No

Dependencies:

Saas, React, Tailwind

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing social buttons with a gradient background and morphing blob effect in CSS border radius is created using HTML, SCSS, React js. When you hover over the button, it highlights itself by changing the transparency level of the button.

Hover to play
Title:

3D gradient buttons

Author:

Sietse

Created on:

January 07, 2019

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive 3d buttons with gradient colors are created using HTML and SCSS. When you hover over the button, it shows an amazing 3d pop-up effect to make it look realistic. All the buttons have different animating effects.

Hover to play
Title:

Colorful gradient flex buttons

Author:

Oguzhan

Created on:

September 21, 2018

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A classic gradient buttons with a candy color palette is created using HTML and Sass. The button looks amazing with a gradient shadow. When you hover over the button, it slightly pops down and shadow disappears to give a 2D look to the button.

Hover to play
Title:

Peach beach button

Author:

Ann H.

Created on:

March 12, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple button with light green and yellow gradient shades on hover converts into orange with yellow shades. A background shadow is also matching with the actual background.

Hover to play
Title:

Colorful gradient buttons

Author:

n

Created on:

May 07, 2016

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful, simple gradient buttons with a shadow is created using HTML and Sass. When you hover over the button, it slightly shifts up and lightens the gradient background of the button to give it an amazing look.

Hover to play
Title:

Gradient hover effect

Author:

Chris Colvin

Created on:

May 03, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A gradient button with the orange shadow gives a 3D look to the button. It is created using HTML and Sass. When you hover over the button, the shadow merges with an original button to make it look like pressing a button animation.

Hover to play
Title:

Gradient button with subtle animations

Author:

Joe

Created on:

September 06, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Chrome, Brave, Firefox, Opera, Edge

Code description:

A beautiful two colored button with an orange and yellow gradient nicely transitions over pink and orange on hover. Transitions are also smooth.

Hover to play
Title:

Cat gradient button disco

Author:

Thomas Wang

Created on:

October 09, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An animated multicolored gradient button with a cat icon at center is created using pure HTML and CSS. The transition among the colors is so fast that it gives a glowing effect to the button.

Hover to play
Title:

Glowing gradient button

Author:

Aleksej Dix

Created on:

May 02, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A glowing gradient button with a multi color palettes and infinite animation is created using pure HTML and CSS. You can change the text color to white to make the text more visible.

Hover to play
Title:

Button with gradient shadow

Author:

Mohsen Khakbiz

Created on:

November 19, 2017

Made with:

HTML, SCSS

Responsive:

Yes

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, gradient button with the shadow is created using HTML and Sass. When you hover over the button, it will shrink and pops in to give an amazing look to the button.

Hover to play
Title:

Gradient button css

Author:

Valentin Galmand

Created on:

January 08, 2017

Made with:

HTML(Slim), Sass

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple button with the gradient border and text is created using HTML(Slim) and Sass. When you hover over the button, it changes the color on the border and text to make it look decent.

Hover to play
Title:

Gradient button

Author:

Eric Grucza

Created on:

April 08, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple button with a gradient of pink and blue colors is created using HTML and Sass. When you hover over the button, it will change the gradient background to more blueish in shade.

Hover to play
Title:

Animated rainbow button

Author:

Lemmin

Created on:

June 10, 2017

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful multicolor rainbow button with gradients border in rainbow shades is created with pure HTML and CSS. When you hover over the button, it shows smooth animation with a rainbow color on its border.

Hover to play
Title:

Animated css gradient border

Author:

Mike Schultz

Created on:

November 02, 2020

Made with:

HTML, PostCSS

Responsive:

No

Dependencies:

PostCSS

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An animated gradient border with inifinite animation is created with HTML and PostCSS. Multi color animation on the border looks attractive on a dark themed web page.

Hover to play
Title:

Animated gradient button

Author:

Estebanane

Created on:

October 23, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful collection of ten different animated gradient buttons with gradient border in one row and gradient button background in other row is created with pure HTML and CSS. When you hover over the button, it shows an awesome animation to make button look decent.

Hover to play
Title:

Old crt button

Author:

John Wilson

Created on:

July 09, 2014

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful and antique gradient button with green and yellow shades is created using HTML and CSS. When you hover over the button, it will give an amazing old-style cathode ray tube animation.

Hover to play
Title:

Big jelly button

Author:

Arron Hunt

Created on:

April 12, 2019

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful jelly button with pink and white gradient makes it look realistic. It also shows the shine on the upper part of the capsule-like button. It is created using pure HTML and CSS.

Hover to play
Title:

Chroma button

Author:

Sebastian Opperman

Created on:

May 01, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A multi color gradient on capsule like button with a shadow is created using HTML and SCSS. When you hover over the button, it shows the glowing effect and looks great on the dark color background page.

Hover to play
Title:

Style button

Author:

Mostafa Abobaker

Created on:

May 04, 2019

Made with:

HTML (Pug), SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A wonderful collection of buttons with google font icons catches user attention is created with HTML(Pug) and SCSS. There are buttons for mail, save, back, next, sign up, etc. each animated differently looks great with the dark color scheme website.

Hover to play
Title:

Fixed width background gradients

Author:

Tanner Hodges

Created on:

February 21, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple fixed-width background gradient buttons is created with HTML and SCSS. Great for beginners to understand code. The purple and maroon gradient is given.

Hover to play
Title:

Gradient button shadows

Author:

Ben Foster

Created on:

April 05, 2017

Made with:

HTML, CSS(Less)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful, simple round buttons with different gradient backgrounds are created with HTML and Less. Border and background shadow looks great with a design that catches user attention.

Hover to play
Title:

Sexy gradient button

Author:

Mihael Tomic

Created on:

June 29, 2016

Made with:

HTML, PostCSS

Responsive:

No

Dependencies:

PostCSS

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing eye-catchy gradient button with the purple and light blue background is created using HTML and PostCSS. It shows an amazing pop-up effect on hover with changing direction on a gradient.

Hover to play
Title:

Existential gradient buttons

Author:

Alex Baldwin

Created on:

February 12, 2015

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple, beautiful collection of buttons with a gradient shade of pink and purple looks great. When you hover over the button, a beautiful transitions are given to give an amazing look to light themed pages.

Hover to play
Title:

Awesome gradient buttons

Author:

Mudasir Ali

Created on:

October 05, 2017

Made with:

HTML, CSS

Responsive:

Yes

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A decorous and awesome gradient buttons with pink shade gradient background on the web page is created using HTML and CSS. When you hover over the button, it shows a smooth animation to change the gradient color.

Hover to play
Title:

Colorful gradient button hover effect

Author:

Candace Petty

Created on:

November 01, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple rounded buttons gets converted to a beautiful sphere like button with gradient of two colors, when you hover over them. It is created using pure HTML and CSS.

Hover to play
Title:

Register gradient button

Author:

Jeremy Mansfield

Created on:

December 28, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple register button with a gradient background of dark green and light green colors is created using pure HTML and CSS. Transition added on hover by changing its background gradient colors.

Hover to play
Title:

Gradient button hover prototype

Author:

Ryan Koenig

Created on:

July 31, 2018

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An attractive button created with the gradient border in two shades of blue and green. It is created with HTML and SCSS. When you hover over the button, it fills the button with the lighter shades than border to make it look deeper.

Hover to play
Title:

Gradient button with html and css

Author:

PhaLuu

Created on:

September 06, 2017

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A simple gradient buttons with two color pallets each is used to color the buttons of different shapes. It is created using pure HTML and CSS. The button has a nice gradient subtle animation effect on hover that looks amazing.

Hover to play
Title:

Fancy gradient button

Author:

Binh

Created on:

January 26, 2022

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant gradient buttons with different color schemes are created using HTML and Sass. When you hover over the button the top button and the bottom button pops out and its size increases. Whereas in the middle two buttons it shows an infinite shining effect.

Hover to play
Title:

Capsule gradient buttons

Author:

Nils Binder

Created on:

January 16, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A delightful capsule shaped gradient buttons in the shade of pinkand orange is created using HTML and CSS. One button has a normal gradient and the other button have gradient borders. When you hover over the first one it changes the background to orange and other fills up with the gradient color.

Hover to play
Title:

Amazing gradient buttons

Author:

Jaymee Jarvis

Created on:

March 03, 2017

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing buttons with a gradient border and gradient background are created using HTML and SCSS. When you hover over the button, it fills up the button background with the gradient shades of pink and blue.

Hover to play
Title:

Multicolor gradient buttons

Author:

Juan Pablo MF

Created on:

September 19, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A beautiful designed buttons with three of them have a gradient background with the shadow effect and one is a flat button. When you hover over the button it looks flat and shadow effect is removed.

Hover to play
Title:

Modern gradient buttons

Author:

Aditya

Created on:

July 23, 2018

Made with:

HTML, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A modern but simple gradient buttons with a different color scheme for all buttons are created using pure HTML and CSS. When you hover over the button, it brightens itself to differentiate among the other buttons.

Hover to play
Title:

Animated border gradient button css

Author:

James

Created on:

May 08, 2019

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A creative button design for fire extinguisher with gradient is created using HTML and SCSS. When you hover over the button, it toggles the icon and gradient on the border and sets back to the original state when mouse is out.

Hover to play
Title:

Pure css subscribe button

Author:

Paige Niedringhaus

Created on:

December 19, 2020

Made with:

HTML, SCSS

Responsive:

No

Dependencies:

Saas

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An elegant newsletter subscribe button with gradient background and shining effect is created using HTML and SCSS. When you hover over the button, it will scale the button bigger and the shining effect looks amazing.

Hover to play
Title:

Gradient button with transparent background

Author:

Grzegorz Witczak

Created on:

May 25, 2018

Made with:

HTML, CSS (Stylus)

Responsive:

No

Dependencies:

nan

Compatable browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A sophisticated gradient button with transparent background is created using HTML and CSS (Stylus). When you hover over the button, it fills button with a gradient with a sliding effect from left to right.

Hover to play
Title:

Glowing round button

Author:

Suvodip Mondal

Created on:

January 31, 2019

Made with:

HTMl, CSS

Responsive:

No

Dependencies:

nan

Compatable browsers:

Chrome, Brave, Firefox, Opera, Edge

Code description:

A beautiful, attractive glowing button with gradient on borders is created using pure HTML and CSS. This button is capsule-shape and borders are thick, giving a glowing effect on hover.