This article will show you how to add shadow to a button using CSS. Button shadow can enhance its visual appeal and make it stand out on your webpage. This article will cover various approaches to adding shadow to a button using CSS.
Table of Content
Add Shadow on button using box-shadow Property
The box-shadow property is commonly used to add shadow to elements in CSS. It allows you to specify the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.
<!DOCTYPE html> <html>
<head>
<title>Button Shadow with box-shadow</title>
<style>
.button {
padding: 10px 20px;
background-color: #0e4b10;
color: white;
border: none;
cursor: pointer;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<button class="button">GeeksforGeeks</button>
</body>
</html>
|
Output
Explanation:
- The .button class styles the button with padding, background color, text color, and removes the default border.
- The box-shadow property adds a shadow with 3px horizontal and vertical offsets, a 5px blur radius, and a semi-transparent black color.
Add Shadow to Button on Hover
You can also add a shadow effect to a button when it is hovered over, creating an interactive visual effect.
<!DOCTYPE html> <html>
<head>
<title>Button Shadow on Hover</title>
<style>
.button {
padding: 10px 20px;
background-color: #0e4b10;
color: white;
border: none;
cursor: pointer;
transition: box-shadow 0.3s ease;
}
.button:hover {
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<button class="button">GeeksforGeeks</button>
</body>
</html>
|
Output
Explanation:
- The setup is similar to the first approach, but we add a transition property to the .button class for a smooth shadow effect when hovering.
- The :hover pseudo-class is used to change the box-shadow property when the mouse pointer is over the button, making the shadow more pronounced.
Add Shadow to Button using filter Property with drop-shadow
The filter property with the drop-shadow function can also be used to add a shadow effect. This approach is particularly useful when you want to apply the shadow to transparent images or SVGs.
<!DOCTYPE html> <html>
<head>
<title>Button Shadow with filter</title>
<style>
.button {
padding: 10px 20px;
background-color: #0e4b10;
color: white;
border: none;
cursor: pointer;
filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.6));
}
</style>
</head>
<body>
<button class="button">GeeksforGeeks</button>
</body>
</html>
|
Output
Explanation:
- The setup is similar to the first approach, but instead of using the box-shadow property, we use the filter property with the drop-shadow function.
- The parameters for drop-shadow are similar to those for box-shadow, but drop-shadow can apply to the entire element, including transparent areas.