How to create gradient button in css?

Gradients are a cool way to make a web page look awesome. You can use a gradient as a background for your webpage. Or, you can use a gradient as a background to HTML elements like buttons.

In this post, we will use CSS to apply the gradient to buttons. I will create 4 buttons with different gradient colors. Let’s see the HTML file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Gradient Button</title>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <button class="bt-1">Click Me</button>
        <button class="bt-2">Click Me</button>
        <button class="bt-3">Click Me</button>
        <button class="bt-4">Click Me</button>        
    </body>
</html>

You can see in the above code that I have taken 4 buttons with the text Click Me.

Now, let’s see the CSS file.

button {
  display: block;
  color: #FFF;
  margin: 15px auto;
  border-style: solid;
  border-color: white;
  border-radius: 50px;
  padding: 15px 50px; 
}

.bt-1 {
  background-image: linear-gradient(90deg, #7bece2, #8196f3);
}


.bt-2 {
  background-image: linear-gradient(90deg, #cec679,  #ef7179);
}

.bt-3 {
  background-image: linear-gradient(90deg, #f18cd8, #fc5a5f);
}

.bt-4 {
  background-image: linear-gradient(90deg, #f06efc, #6651f0);
}

Here, I have first applied some CSS properties to the button element and then I have applied gradients to the buttons – bt-1, bt-2, bt-3, and bt-4.

Output :

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: