# How to design gradient button in CSS

**Published by:** [jyoti.design](https://paragraph.com/@jyoti-design/)
**Published on:** 2022-12-21
**URL:** https://paragraph.com/@jyoti-design/how-to-design-gradient-button-in-css

## Content

To create a gradient button in CSS, you can use the linear-gradient function to set the background of the button to a gradient. You can also use the border-radius property to add rounded corners to the button. Here is an example of how you might create a gradient button using CSS: button { background: linear-gradient(to right, #3498db, #2980b9); border: none; border-radius: 5px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } This will create a button with a blue gradient background, white text, and rounded corners. You can adjust the gradient colors and other styles to customize the appearance of the button. Here is an example of how you might use this button in your HTML: <button>Click me</button> You can also use CSS to create a hover effect for the button, where the gradient changes when the user hovers over the button with their mouse. To do this, you can use the :hover pseudo-class to apply different styles to the button when it is hovered over. Here is an example of how you might create a hover effect for the gradient button: button:hover { background: linear-gradient(to right, #2980b9, #3498db); } This will change the gradient to a different set of colors when the button is hovered over. You can adjust the gradient colors and other styles to customize the hover effect.

## Publication Information

- [jyoti.design](https://paragraph.com/@jyoti-design/): Publication homepage
- [All Posts](https://paragraph.com/@jyoti-design/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@jyoti-design): Subscribe to updates
- [Twitter](https://twitter.com/jyotidesign_): Follow on Twitter