Unterstrich aus Mitte

Unterstrich aus Mitte: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

underlinetext-buttonborder-drawcenter-origin

CSS

.btn-066 {
  position: relative;
  font: 500 15px/1 Georgia,serif;
  color: #292524;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer
}
.btn-066::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #b45309;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s
}
.btn-066:hover::after {
  transform: scaleX(1)
}
.btn-066:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 4px
}
.btn-066:active {
  color: #b45309
}

HTML

<button class="btn-066">Our story</button>

Prompt

Ein Serifen-Text-Button (15px, #292524, keine Box) mit einem dünnen 1px Bernstein-Unterstrich #b45309, der beim Hover von der Mitte nach außen wächst (scaleX 0 auf 1, Ursprung center, 300ms). Active färbt den Text bernstein. Fokus-Outline 2px Bernstein.

Unterstrich aus Mitte

Gleiches Regal