Collection of hand-picked free HTML and CSS gradient button code examples from codepen and other resources. Update of July 2019 collection. 9 new items
Related Articles
- CSS Buttons
- CSS Button Hover Effects
- CSS 3D Buttons
- CSS Submit Buttons
- CSS Flat Buttons
- CSS Close Buttons
- CSS Download Buttons
- CSS Play/Pause Buttons
- CSS Button Click Effects
Links
Made with
- HTML / CSS
About a code
CSS linear-gradient Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Colorful Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Slime
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Glowing Gradient Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Modern Gradient Buttons
A playful set of buttons that utilize CSS gradients for fun colors and animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Gradient Color Button with Hover Glow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Chroma Button
Example demonstrates the ability to use a multi-color box shadow using pseudo elements and a blur filter.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Call us Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Flat Buttons
Flat buttons with smooth hover effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About the code
Peach Beach Button
Animated button in Sass.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Cat Gradient Button Disco
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Colorful Gradient Flex Buttons
Sweet colorful gradient flex buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
Animated Gradient Button
Pure CSS call to action button with an animated background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Animated Rainbow Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Gradient Button Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (Less)
About the code
Gradient Button Shadows
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
CSS Gradient Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the 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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Gradient Buttons
CSS gradient buttons with Font Awesome icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css


Links
Made with
- HTML / CSS
About the 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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Gradient Button
Gradient button with subtle animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Gradient Button
Gradient button with translate on hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -