Colorful gradient buttons can easily catch the attention of your users. Let’s check how to create a good looking gradient button in HTML with the help of CSS.
If you prefer video tutorial then watch the following YouTube video.
The basic button can be created in html as given below.
<button type="button" class="button">Gradient Button</button>The background style property and linear-gradient() function can be used to create a stylish gradient background for the button.
background: linear-gradient(to bottom, #fceeb5, #ee786e);Following is the complete example of gradient button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.button {
background: linear-gradient(to bottom, #fceeb5, #ee786e);
border: none;
padding: 10px;
border-radius: 25px;
color: white;
font-size: 16px;
cursor: pointer;
}
.button:active {
transform: translateY(2px);
}
</style>
<title>Gradient Button CSS Example</title>
</head>
<body>
<button type="button" class="button">Gradient Button</button>
</body>
</html>
As you can see, I have used style properties such as border-radius to make the button rounded and beautiful. The transform property is used here to give the button a small jump when the user clicks the button.
Following is the output.
That’s how you create gradient button with CSS.
