Marca-texto

Marca-texto: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão de texto com cara de marca-texto: texto escuro #1c1917 de 15px semibold com uma faixa amarela #fde047 cobrindo os 30% inferiores do texto, como um marcador. No hover a faixa cresce até cobrir o botão inteiro (300ms). No active o texto fica marrom #78350f. Outline de foco de 2px escuro.

Marca-texto

Mesma prateleira