1. Home
  2. Creations
  3. Codepen
  4. Squishy button design
Codepen

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

See the Pen Squishy by Håvard Brynjulfsen (@havardob) on CodePen.

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;