askvity

How Do I Add a Shadow on a Button?

Published in CSS Styling 4 mins read

Adding a shadow to a button is a great way to make it stand out and improve its visual appeal. The simplest and most common method to achieve this is by using CSS. Specifically, the CSS box-shadow property allows you to apply shadow effects to HTML elements like buttons. As noted in the reference, you typically define a CSS class and apply the box-shadow property to it, like creating a class named "shadow-button" and applying the style there.

Understanding the box-shadow Property

The box-shadow property is a powerful CSS tool that lets you add one or more shadows to an element's box. You can control the shadow's offset, blur, spread, color, and whether it's an outer (default) or inner (inset) shadow.

Here are the most common values you'll use with box-shadow:

  • offset-x: Required. The horizontal offset of the shadow. Positive values move the shadow to the right, negative values to the left.
  • offset-y: Required. The vertical offset of the shadow. Positive values move the shadow downwards, negative values upwards.
  • blur-radius: Optional. The larger the value, the more blurred the shadow will be. 0 creates a sharp shadow. Cannot be negative.
  • spread-radius: Optional. Positive values increase the size of the shadow, negative values decrease it. 0 keeps the shadow the same size as the element.
  • color: Optional. The color of the shadow. If not specified, it typically defaults to the text color or a browser default.
  • inset: Optional. Changes the shadow from an outer shadow (default) to an inner shadow, casting it inside the element's frame.

Basic Example: Creating a Simple Button Shadow

To add a shadow, you first define the style in your CSS and then apply that style to your HTML button element.

CSS

You can create a CSS class, for instance, shadow-button, and define the shadow properties within it.

.shadow-button {
  /* Basic box shadow: right 2px, down 2px, no blur, no spread, grey color */
  box-shadow: 2px 2px 0px #888888;
  padding: 10px 20px; /* Optional: Add padding for better button appearance */
  border: none; /* Optional: Remove default border */
  cursor: pointer; /* Optional: Indicate it's clickable */
  background-color: #f0f0f0; /* Optional: Light background */
  border-radius: 5px; /* Optional: Rounded corners */
}

/* Optional: Add a hover effect */
.shadow-button:hover {
  box-shadow: 3px 3px 5px #555555; /* Slightly larger and blurred shadow on hover */
}

In this example, box-shadow: 2px 2px 0px #888888; creates a shadow that is offset 2 pixels to the right, 2 pixels down, has no blur (0px), no spread (default 0), and is a medium grey color (#888888).

HTML

Now, apply this CSS class to your button using the class attribute.

<button class="shadow-button">
  Click Me
</button>

This HTML structure links the button element to the shadow-button CSS class, applying the defined shadow style to it.

Customizing Your Button Shadow

You can experiment with the box-shadow values to create different effects:

  • Subtle Shadow: box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); (Offset only vertically, with blur and a semi-transparent black color).
  • Strong Shadow: box-shadow: 5px 5px 10px #333; (Larger offset and blur, dark grey color).
  • Shadow with Spread: box-shadow: 2px 2px 5px 2px #555; (Adds a 2px spread to the shadow).
  • Inset Shadow: box-shadow: inset 0px 0px 5px #000; (Creates an inner shadow effect, often used for pressed states).
Value Description
offset-x Horizontal position (right +, left -)
offset-y Vertical position (down +, up -)
blur-radius Amount of blur (larger = more blur)
spread-radius Size of the shadow (larger = bigger shadow)
color Color of the shadow
inset Makes it an inner shadow (optional keyword)

Applying the CSS

You can include your CSS rules in several ways:

  1. External Stylesheet: Link a .css file to your HTML document's <head> section. (Recommended for larger projects).
  2. Internal Stylesheet: Place your CSS rules within <style> tags in the <head> section of your HTML document. (Good for single-page examples or small projects).
  3. Inline Styles: Apply the style attribute directly to the button element (<button style="box-shadow: ...;">). (Generally discouraged for maintainability, but possible for simple cases).

By using CSS and the versatile box-shadow property, you can easily add custom shadow effects to your buttons, enhancing their appearance and user interface.

Related Articles