Textmarker-Swipe

Textmarker-Swipe: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Text-Button, der wie mit Textmarker markiert aussieht: 15px semibold dunkler Text #1c1917 mit einem gelben #fde047 Band, das die unteren 30% des Textes wie ein Marker abdeckt. Beim Hover wächst das Band über den ganzen Button (300ms). Active färbt den Text braun #78350f. Fokus-Outline 2px Dunkel.

Textmarker-Swipe

Gleiches Regal