How to Add Shadow to Button in CSS ?

Last Updated : 29 Feb, 2024

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
Add Shadow to Button on Hover
Add Shadow to Button using filter Property with drop-shadow

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.

HTML

<!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.

HTML

<!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.

HTML

<!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>