30+ Beautiful CSS Gradient Buttons (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS gradient button code examples. These CSS Gradient Buttons can be integrated into your website very easily.
1. Gradient Button Hover
Author: Muhammed Erdem (JavaScriptJunkie)
Links: Source Code / Demo
Created on: April 26, 2017
Made with: HTML, CSS
Tags: gradient, button, gradient-button, button-animation, button animate
2. 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.
Author: Zach Cole (zachacole)
Links: Source Code / Demo
Created on: November 6, 2015
Made with: HTML, CSS
Tags: button, css3, keyframes, animation, ui
3. Gradient Button CSS
Gradient button with translate on hover
Author: Eric Grucza (egrucza)
Links: Source Code / Demo
Created on: April 8, 2015
Made with: HTML, SCSS
Tags: gradient, button, hover, translate
4. Peach Beach Button
First take on newest CodePen challenge. Animated button in Sass
Author: Ann H. (merkund)
Links: Source Code / Demo
Created on: January 9, 2019
Made with: HTML, Sass
Tags: button, cpc-peach, codepenchallenge
5. Flat Buttons With Smooth Hover Effect
Author: Silvestar Bistrović (CiTA)
Links: Source Code / Demo, Www.grabient.com
Created on: February 4, 2019
Made with: HTML, SCSS
Tags: gradient, animation, buttons
6. 💐 Colorful Gradient Flex Buttons 💐
Author: 0guzhan (0guzhan)
Links: Source Code / Demo
Created on: September 14, 2018
Made with: HTML, SCSS
Tags: css, button, gradient, flex
7. Cat Gradient Button Disco 😸🔘🎨🕺
Author: Thomas Wang (thomaswangio)
Created on: October 6, 2018
Made with: HTML, CSS, JS
Tags: gradient, gradient-button, buttons
8. Gradient Button Shadows
Author: Ben Foster (benfoster)
Links: Source Code / Demo
Created on: April 5, 2017
Made with: HTML, Less
9. Animated Gradient Button [Pure CSS]
Call to action button with an animated background.
Author: Oleg Frolov (Volorf)
Links: Source Code / Demo
Created on: March 28, 2018
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
Tags: button, gradient, animated, call-to-action, ui
10. Gradient Buttons With Background-Color Change (CSS-only)
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)
Author: MrPirrera (pirrera)
Links: Source Code / Demo
Created on: February 28, 2017
Made with: HTML, CSS, JS
Tags: buttons, gradient, background-color, hover
11. CSS Gradient Buttons
Author: Arturo (arturoalviar)
Links: Source Code / Demo
Created on: April 1, 2017
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: gradient, button, transfrom
12. Neumorphism Bootstrap Button/gradient Button
Author: Melanie Müller (codearosa)
Links: Source Code / Demo
Created on: January 12, 2020
Made with: HTML, SCSS
13. Modern Gradient Buttons
A playful set of buttons that utilize CSS gradients for fun colors and animations.
Author: Jordan Marshall (TheCSSKing)
Links: Source Code / Demo
Created on: August 29, 2019
Made with: HTML, SCSS
Tags: gradient-button, css-gradient, gradient-border, modern, button
14. Cool Effect Gradient Button
Author: g3offrey (legeoffrey)
Links: Source Code / Demo
Created on: January 25, 2015
Made with: HTML, CSS
Tags: gradient, peach, effect, button
15. Gradient Button, Hovers Smoothly! | CSS Only
A simple CSS-only button with smoothly changing gradients when hovered.
Author: hawcubite (hawcubite)
Links: Source Code / Demo
Created on: November 13, 2015
Made with: HTML, SCSS, JS
Tags: button, gradient
16. Sexy Gradient Button
Background gradient button with CSS transitions to make it more sexy
Author: Mihael Tomić (mihaeltomic)
Links: Source Code / Demo
Created on: June 29, 2016
Made with: HTML, PostCSS
Tags: gradient, transition, button, css, sexy
17. Gradient Button Hover
Author: Enjeck (ProTechThor)
Links: Source Code / Demo
Created on: January 7, 2020
Made with: HTML, CSS
Tags: gradient, button, gradient-button, button-animation, button animate
18. Gradient Hover Animated Button | Welcome In My World
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 \
Author: Marcel Pirnay (mars2601)
Links: Source Code / Demo
Created on: January 27, 2016
Made with: HTML, CSS
Tags: button, hover, gradient, background, ghost
19. Button With Gradient Shadow
Based on Vimeo redesign concept by Fayaz Mohamed https://www.behance.net/mfayax
Author: Mohsen Khakbiz (Mohsen-Khakbiz)
Links: Source Code / Demo
Created on: May 1, 2016
Made with: HTML, SCSS
Tags: button, fancy, hover, gradient
20. Bootstrap V4 Gradient Buttons Examples
Author: Chris West (cwestify)
Links: Source Code / Demo
Created on: December 22, 2017
Made with: HTML, CSS
21. Animated Gradient Button
Practicing with Flexbox, and some effects & gradient styles.
Author: Katia De Juan (Katiae)
Links: Source Code / Demo
Created on: May 15, 2017
Made with: HTML, SCSS
Tags: flexbox, gradient, button, popup
22. Css Gradient Buttons
Author: canburak1992 (csstutorial)
Links: Source Code / Demo
Created on: March 2, 2019
Made with: HTML, CSS
Tags: css-gradients, css-buttons, css gradient buttons
23. Existential Gradient Buttons
featuring theming thanks to nested sass maps
Author: alex baldwin (cubeghost)
Links: Source Code / Demo
Created on: February 11, 2015
Made with: HTML, SCSS
Tags: css, gradient, scss
24. Supa Dupa Buttons
Author: Jana Richmond (DabiBlack)
Links: Source Code / Demo
Created on: August 10, 2020
Made with: HTML, Sass
Tags: codepenchallenge, cpc-the-rain, css, buttons, gradient
25. Customizable Gradient Button Using Function And Map In SCSS (CSS Loop)
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
Author: Takane Ichinose (takaneichinose)
Links: Source Code / Demo
Created on: June 30, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: gradient, buttons, 3d, ui, customize
26. Gradient Button Test
Beautiful looking button with background-gradient on hover.
Author: Codepalm (Codepalm)
Links: Source Code / Demo
Created on: April 27, 2020
Made with: HTML, CSS
Tags: gradient-button, button, gradient, css, button-hover
More Awesome Lists:
Share: