# How to design gradient button in CSS

By [jyoti.design](https://paragraph.com/@jyoti-design) · 2022-12-21

---

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.

---

*Originally published on [jyoti.design](https://paragraph.com/@jyoti-design/how-to-design-gradient-button-in-css)*