Squishy button design
Sometimes I grow sick of flat buttons and other UI elements. Here's my attempt to create a skeuomorphic button, with delicate shadows and smooth corners.
- What is this?
- A Codepen demo
- Created
- ~ January 2024
- Languages used
- HTML, CSS
The pen
The gradient shadow is created manually by adding several box-shadows. All sizes are written in em so that the box-shadow, border-radius and paddings are related to its font-size, meaning you can scale it up and down as you'd like.
Language:
css
box-shadow:
inset
0 0.0625em 0 0 #f4f4f4,
0 0.0625em 0 0 #efefef,
0 0.125em 0 0 #ececec,
0 0.25em 0 0 #e0e0e0,
0 0.3125em 0 0 #dedede,
0 0.375em 0 0 #dcdcdc,
0 0.425em 0 0 #cacaca,
0 0.425em 0.5em 0 #cecece;