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 :
DeveloperXon 
Leave a Reply