Tracking reveal

Tracking reveal: a CSS button. Copy the rules, or the prompt that rebuilds it.

text-swapexpandpilluppercaseletter-spacing

CSS

.btn-118 {
  font: 700 13px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #0f172a;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  transition: background .2s
}
.btn-118 span {
  display: inline-block;
  transition: letter-spacing .3s
}
.btn-118 span::after {
  content: " \2193";
  opacity: 0;
  transition: opacity .3s
}
.btn-118:hover {
  background: #e2e8f0
}
.btn-118:hover span {
  letter-spacing: .3em
}
.btn-118:hover span::after {
  opacity: 1
}
.btn-118:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px
}
.btn-118:active {
  background: #cbd5e1
}

HTML

<button class="btn-118"><span>Menu</span></button>

Prompt

A grey #f1f5f9 pill with uppercase 13px bold #0f172a text at 0.1em tracking, 13px by 22px padding. On hover the tracking expands to 0.3em over 300ms and a down arrow (unicode 2193) fades in after the word; background #e2e8f0. Active #cbd5e1. Focus 2px dark outline offset 2px.

Tracking reveal

Same shelf