Kinesis2.0
Esc

Try “tilt”, “reveal”, “drag”, or “reduced motion”.

← All examples

Pressable buttons

Three press styles. The second animates its shadow with --k-progress.

Press the buttons, or Tab to one and press EnterEdit
.presses {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.press {
  --k-when: press;
  --k-motion: bouncy;
  padding: 14px 26px;
  border: 0;
  border-radius: 14px;
  background: #0c1324;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.press--squish {
  --k-scale: 0.88;
}

.press--sink {
  --k-y: 5px;
  box-shadow: 0 calc((1 - var(--k-progress)) * 5px) 0 #2f6bff;
}

.press--glow {
  --k-scale: 0.97;
  --k-background: #2f6bff;
}

Uses