Design for AI

Trazo de rotulador

Trazo de rotulador: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de texto que parece marcado con rotulador: texto oscuro #1c1917 de 15px semibold con una banda amarilla #fde047 que cubre el 30% inferior del texto como un subrayador. Al pasar el cursor la banda crece hasta cubrir todo el botón (300ms). En active el texto se vuelve marrón #78350f. Outline de foco de 2px oscuro.

Misma estantería