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