CSS on Buttons : How to fade-out the edges of the background color of a button?

Hi there!

I’m trying to customize a button with CSS to match the style in the image I shared below.

I’d like the default state to have a background color with soft, feathered edges. On hover, I’m hoping to have the background color change to a different shade.

Any tips or guidance would be greatly appreciated—thank you so much! 🙂

Add this code into custom css:

button {
    background-color: #FF0000; /* Button's solid background color */
    background-image: radial-gradient(circle, rgba(255, 0, 0, 0.8) 40%, rgba(255, 0, 0, 0) 100%);
    border: none; /* Optional: remove border */
    padding: 10px 20px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background-color: #FF0000; /* Maintain solid background on hover */
    background-image: radial-gradient(circle, rgba(255, 0, 0, 1) 40%, rgba(255, 0, 0, 0) 100%);
}

Here, you need to change the button by replacing the actual button class or id.