Allan Deutsch
@allandeutsch.com
👨💻 Software craftsman
🎟️ SeattleJS Organizer
Currently building:
🦺 typesafe-ts to help you write safer code with confidence
🐤 docduck.dev to get inline docs feedback from developers
🎟️ SeattleJS Organizer
Currently building:
🦺 typesafe-ts to help you write safer code with confidence
🐤 docduck.dev to get inline docs feedback from developers
I heard glassmorphism is in again?! I use glassmorphism on allandeutsch.com in a few places. Check out the nice inner glow around the edges.
June 11, 2025 at 10:36 PM
I heard glassmorphism is in again?! I use glassmorphism on allandeutsch.com in a few places. Check out the nice inner glow around the edges.
Sometimes a button would rather be <a href="/pride"> link. I think it's wonderful that is possible!
a 12/n
a 12/n
June 11, 2025 at 4:42 AM
Sometimes a button would rather be <a href="/pride"> link. I think it's wonderful that is possible!
a 12/n
a 12/n
In honor of pride month, a proud button!
Button 11/n
Button 11/n
June 4, 2025 at 9:35 PM
In honor of pride month, a proud button!
Button 11/n
Button 11/n
Saw this cool button design on youtube and decided to do a lil riff on it using changes to the inset shadow to add to the 3d effect.
It's subtle but when the glowing ring is down on click, the edge lighting on the button is bigger.
Button 10/n
original: youtu.be/b38It0dCWwg
It's subtle but when the glowing ring is down on click, the edge lighting on the button is bigger.
Button 10/n
original: youtu.be/b38It0dCWwg
May 22, 2025 at 8:37 AM
Saw this cool button design on youtube and decided to do a lil riff on it using changes to the inset shadow to add to the 3d effect.
It's subtle but when the glowing ring is down on click, the edge lighting on the button is bigger.
Button 10/n
original: youtu.be/b38It0dCWwg
It's subtle but when the glowing ring is down on click, the edge lighting on the button is bigger.
Button 10/n
original: youtu.be/b38It0dCWwg
Adding a subtle scale to an button on hover and active states helps it echo the behavior of a real button moving up and down.
Subtlety is key as the effect is quite noticeable. This button is only using `scale: 1.01` and `scale: 0.99`!
Button 9/n
Subtlety is key as the effect is quite noticeable. This button is only using `scale: 1.01` and `scale: 0.99`!
Button 9/n
May 20, 2025 at 6:22 AM
Adding a subtle scale to an button on hover and active states helps it echo the behavior of a real button moving up and down.
Subtlety is key as the effect is quite noticeable. This button is only using `scale: 1.01` and `scale: 0.99`!
Button 9/n
Subtlety is key as the effect is quite noticeable. This button is only using `scale: 1.01` and `scale: 0.99`!
Button 9/n
Did you know that CSS `box-shadow` accepts a comma-separated list of shadows? That means a single box can have multiple shadows!
Layering multiple shadows on a single element adds more depth and dimension to the element.
Button 8/n
Layering multiple shadows on a single element adds more depth and dimension to the element.
Button 8/n
May 16, 2025 at 8:12 PM
Did you know that CSS `box-shadow` accepts a comma-separated list of shadows? That means a single box can have multiple shadows!
Layering multiple shadows on a single element adds more depth and dimension to the element.
Button 8/n
Layering multiple shadows on a single element adds more depth and dimension to the element.
Button 8/n
Transparent shadows do a better job blending with the background. Notice that the top button's shadow has a muddy grayish ring on the outside?
The bottom button's shadow is transparent, and blends much more gracefully with the background.
Buttons 6 & 7, background colorized circa 2025.
The bottom button's shadow is transparent, and blends much more gracefully with the background.
Buttons 6 & 7, background colorized circa 2025.
May 15, 2025 at 8:04 AM
Transparent shadows do a better job blending with the background. Notice that the top button's shadow has a muddy grayish ring on the outside?
The bottom button's shadow is transparent, and blends much more gracefully with the background.
Buttons 6 & 7, background colorized circa 2025.
The bottom button's shadow is transparent, and blends much more gracefully with the background.
Buttons 6 & 7, background colorized circa 2025.
In real life, shadows only darken whatever they touch - never obscuring it.
Shadows in UIs should imitate those in real life by similarly NOT obscuring the background. This is done by using a shadow color with transparency.
Transparency makes shadows more subtle and life-like.
Button 7/n
Shadows in UIs should imitate those in real life by similarly NOT obscuring the background. This is done by using a shadow color with transparency.
Transparency makes shadows more subtle and life-like.
Button 7/n
May 14, 2025 at 2:21 AM
In real life, shadows only darken whatever they touch - never obscuring it.
Shadows in UIs should imitate those in real life by similarly NOT obscuring the background. This is done by using a shadow color with transparency.
Transparency makes shadows more subtle and life-like.
Button 7/n
Shadows in UIs should imitate those in real life by similarly NOT obscuring the background. This is done by using a shadow color with transparency.
Transparency makes shadows more subtle and life-like.
Button 7/n
One trick I use for almost every button is a subtle Y translation and some changes to the box-shadow on hover/focus & active.
The translation is only -3px for hover/focus & -1px when active but it makes buttons feel much more tactile!
Button 6/n
The translation is only -3px for hover/focus & -1px when active but it makes buttons feel much more tactile!
Button 6/n
May 13, 2025 at 6:48 AM
One trick I use for almost every button is a subtle Y translation and some changes to the box-shadow on hover/focus & active.
The translation is only -3px for hover/focus & -1px when active but it makes buttons feel much more tactile!
Button 6/n
The translation is only -3px for hover/focus & -1px when active but it makes buttons feel much more tactile!
Button 6/n
When the CEO wants design/eng to "make the button bigger" this button will rise to the occasion!
May 10, 2025 at 8:17 AM
When the CEO wants design/eng to "make the button bigger" this button will rise to the occasion!
I feel like it's still not quite right hahaha
May 9, 2025 at 1:20 AM
I feel like it's still not quite right hahaha
Objects appear larger as they approach the observer.
Similarly, an object between a light and a backdrop will cast a larger & softer shadow on the backdrop the further away it is.
Put these together and you get a button that "pops out" of the page!
Button 4/n
Similarly, an object between a light and a backdrop will cast a larger & softer shadow on the backdrop the further away it is.
Put these together and you get a button that "pops out" of the page!
Button 4/n
May 9, 2025 at 12:24 AM
Objects appear larger as they approach the observer.
Similarly, an object between a light and a backdrop will cast a larger & softer shadow on the backdrop the further away it is.
Put these together and you get a button that "pops out" of the page!
Button 4/n
Similarly, an object between a light and a backdrop will cast a larger & softer shadow on the backdrop the further away it is.
Put these together and you get a button that "pops out" of the page!
Button 4/n