Add Shadow to Button on Hover

Add Shadow on button using box-shadow Property

Add Shadow to Button using filter Property with drop-shadow

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">w3wiki</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.

How to Add Shadow to Button in CSS ?

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

Tags:

#CSS-Questions #CSS #Web Technologies