CSS button shadows
CSS Button Shadows
Buttons are very common elements in web design. Adding shadows can make them look more three-dimensional and attractive. In CSS, we can use the box-shadow property to achieve button shadows. This article will detail how to use CSS to add shadow effects to buttons and provide several sample code examples for reference.
1. Adding a Simple Button Shadow
First, let’s take a look at a simple example of how to add a simple shadow effect to a button:
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we added a simple shadow effect to the button, controlling the shadow’s position, size, and color by setting the box-shadow property. The button’s background color is blue, and the text is white, giving it a simple overall look.
2. Adding Multi-Layer Shadow Effects
In addition to simple shadow effects, we can also add multi-layer shadow effects to buttons to make them appear more three-dimensional. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Multiple Shadows Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
-2px -2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the example above, we add two shadows to the button: one on the bottom right and one on the top left. This is achieved by setting multiple box-shadow property values. The button’s background color is red, which makes the overall effect more three-dimensional.
3. Adding a Diffused Shadow Effect
In addition to simple shadow effects and multi-layered shadow effects, we can also add a diffused shadow effect to buttons to make them look more three-dimensional and 3D. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Spread Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we add a diffuse shadow effect to the button, controlling the extent of the shadow by setting the value of the box-shadow property. The button’s background color is green, making the overall look more three-dimensional and attractive.
4. Adding a Dynamic Shadow Effect
In addition to static shadow effects, we can also add dynamic shadow effects to buttons, making them appear when the mouse hovers over them. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #f39c12;
color: white;
border: none;
border-radius: 5px;
transition: box-shadow 0.3s;
}
.button:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we added a dynamic shadow effect to the button. When the mouse hovers over the button, the shadow appears. By setting the transition property to achieve a smooth transition effect, the shadow makes the button look more vivid.
5. Adding a 3D Shadow Effect
In addition to the diffuse shadow effect, we can also add a 3D shadow effect to the button to make it look more three-dimensional and solid. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button 3D Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #9b59b6;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we added a three-dimensional shadow effect to the button, controlling the shadow’s position, size, and color by setting the value of the box-shadow property. The button’s background color is purple, making the overall look more three-dimensional and attractive.
6. Adding a Border Shadow Effect
In addition to the inner shadow effect, we can also add a border shadow effect to the button to make it look more three-dimensional and three-dimensional. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Border Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #1abc9c;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we added a border shadow effect to the button, controlling the shadow’s position, size, and color by setting the value of the box-shadow property. The button’s background color is green, making the overall look more three-dimensional and attractive.
7. Adding a Drop Shadow Effect
In addition to the regular shadow effect, we can also add a drop shadow effect to the button to make it look more three-dimensional and 3D. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Projection Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #34495e;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we add a drop shadow effect to the button, controlling the shadow’s position, size, and color by setting the value of the box-shadow property. The button’s background color is gray, making the overall look more three-dimensional and attractive.
8. Adding a Transparent Shadow Effect
In addition to the regular shadow effect, we can also add a transparent shadow effect to the button to make it look more three-dimensional and 3D. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Transparent Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #95a5a6;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we added a transparent shadow effect to the button, controlling the shadow’s transparency by setting the value of the box-shadow property. The button’s background color is gray, making the overall look more three-dimensional and attractive.
9. Adding a Color Gradient Shadow Effect
In addition to the regular shadow effect, we can also add a color gradient shadow effect to the button to make it look more three-dimensional and three-dimensional. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Gradient Shadow Example</title>
<style>
.button {
padding: 10px 20px;
background-color: #f1c40f;
color: white;
border: none;
border-radius: 5px;
box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Output:
In the above example, we added a color gradient shadow effect to the button, controlling the shadow’s color gradient by setting the value of the box-shadow property. The button’s background color is yellow, making the overall look more three-dimensional and attractive.
10. Adding a Blur Shadow Effect
In addition to the regular shadow effect, we can also add a blurred shadow effect to the button to make it look more three-dimensional and 3D. Here is a sample code:
Button Blur Shadow Example