# Marca-texto (B 070)

Categoria: Botões  
Tags: underline, highlight, text-button, marker  
Página: https://designforai.dev/pt/snippet/btn-070

## 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.

## HTML

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

## CSS

```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
}
```