Undoubtedly, shadows can make HTML components beautiful. In this CSS tutorial, let’s learn how to create shadows for buttons.
If you prefer video tutorial then watch the following YouTube video.
You can create shadows using the CSS property box-shadow. This style property accepts multiple values. The first value is the horizontal shadow whereas the second value is the vertical shadow. The third one is the shadow spread and the fourth value is the shadow color.
box-shadow: 2px 2px 5px gray;Following is the complete example of a button with shadows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.button {
background-color: #2ee59d;
border: none;
padding: 10px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
box-shadow: 0px 2px 5px gray;
}
</style>
<title>Button with Shadows CSS Example</title>
</head>
<body>
<button type="button" class="button">Shadow Button</button>
</body>
</html>
And following is the output.
That’s how you create a button with shadows in HTML using CSS.
