Fraser Boag

Doodle: Chunky 3D-effect CSS Buttons

Back to all notes
Dev
3rd September '24

Something I haven't done in ages, but I took a notion the other day to fiddle around with a little CSS doodle based on an image I came across on Call To Inspiration.

The buttons are rendered entirely with CSS and I feel a few little details in particular really bring it to life, such as the subtle glow on the "active" light and the drop shadows cast by the protruding (inactive) buttons. These details don't draw the eye - a user may not even notice they're there - but they definitely lend something to the overall impact of the design.

As much as I personally wouldn't reach for a piece of UI this detailed in a real design, this really was food for thought in terms of designing user interfaces based on the real-world physical properties of light. Designers figured this out decades ago with much-touted skeumorphism, but it really does just look good to the eye when digital interfaces move and react in ways which are analogous to the real world.

More notesAll notes

Get in touch  —  fraser.boag@gmail.com
Copyright © Fraser Boag 2013 - 2024. All rights reserved.