Is it a good idea to use shadows on buttons?

TL;DR

Yes, using shadows on buttons is a good practice in UI design. Shadows effectively indicate that buttons are interactive, suggesting they can be clicked or tapped. This is particularly important for Floating Action Buttons (FABs), where a prominent shadow highlights their role as a primary action. Additionally, dynamically adjusting shadows during user interaction provides visual feedback, enhancing usability.

Detailed answer 

Yes, using shadows on buttons is generally a good idea in UI design, as it enhances the user experience by clearly indicating interactivity and actionability. Here's why:

Indication of interactivity 

Applying shadows to buttons can effectively signal to users that these elements are interactive. The shadow suggests that the button is elevated above other elements on the page, which intuitively communicates that it can be clicked or tapped.

By creating a sense of depth, shadows also make it clear which elements are more important and which are less important, which helps users focus on the most important information.

Enhanced visual feedback 

When users interact with buttons, such as hovering over them or clicking them, dynamically adjusting the shadow (either increasing or decreasing its intensity) can provide valuable visual feedback.

A visualization of the shadow application to the buttons for an enhanced visual feedback.

Source

This interaction design technique helps reinforce the action, making the experience more satisfying and understandable for the user. 

Common practice with Floating Action Buttons (FABs) 

In many modern UI frameworks, especially Material Design by Google, it's a common practice to apply a prominent shadow to Floating Action Buttons. This not only highlights the FAB as a primary action but also separates it visually from other elements on the screen. The shadow makes the FAB stand out as an important, actionable item, thereby guiding user engagement.

The use of shadows on the Floating Action Buttons.

Related reading: Where are shadows most effectively used in the design?

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers. 

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent