Kehinde Adeleke

Buttons

SF Compute and COSS UI have buttons with a feeling of depth. They act like physical buttons.


The key css properties are:

  1. border
  2. background-image
  3. box-shadow
  4. transform

The background-image and box-shadow properties with multiple color stops give the button its embossed appearance at rest. When pressed, the scale transform creates a debossed effect, simulating how a physical button depresses under pressure.