How to put a shadow on a button in HTML

You can add a shadow on any side of a HTML button.

You can put it on top, left, bottom and right side of the button.

Also, you can put the shadow on two sides or all sides of the button.

Bottom Button Shadow

To add a simple bottom shadow on a button using the following css code:

box-shadow: 0px 10px red;

This adds a solid shadow to the bottom of the button.

Right Button Shadow

To add the shadow to the right of the button, use a positive number value on the first value.

box-shadow: 10px 10px red;

Now you have a shadow on the right and at the bottom of the button.

Left Button Shadow

You can add a left button shadow turn the first value from negative into positive px value.

box-shadow: -10px 0px red;

Top Button Shadow

To add a top button shadow change the second value into a negative px value.

box-shadow: 0px -10px red;

Blur the Shadow

To make the solid shadow appear like a real shadow, add the blur value.

box-shadow: 0px 10px 5px red;

Size of Shadow

Finally, you can control the size of the shadow using a fifth value called the spread radius.

box-shadow: 0px 10px 5px 20px red;