Highlighter swipe

Highlighter swipe: a CSS button. Copy the rules, or the prompt that rebuilds it.

underlinehighlighttext-buttonmarker

CSS

.btn-070 {
  font: 600 15px/1.2 system-ui,sans-serif;
  color: #1c1917;
  background: linear-gradient(120deg,#fde047 0%,#fde047 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 90%;
  border: 0;
  padding: 4px 4px;
  cursor: pointer;
  transition: background-size .3s,color .3s
}
.btn-070:hover {
  background-size: 100% 100%
}
.btn-070:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 3px
}
.btn-070:active {
  background-size: 100% 100%;
  color: #78350f
}

HTML

<button class="btn-070">Highlight this</button>

Prompt

A text button that looks marker-highlighted: 15px semibold dark text #1c1917 with a yellow #fde047 band covering the bottom 30% of the text like a highlighter. On hover the band grows to cover the whole button (300ms). Active turns the text brown #78350f. Focus outline 2px dark.

Highlighter swipe

Same shelf