Outline Fill Button

<button class="outline-btn">Learn More</button>

.outline-btn {
  position: relative;
  padding: 12px 30px;
  background: transparent;
  color: #1a1a1a;
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: color .35s ease;
  z-index: 0;
}
.outline-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.outline-btn:hover { color: #fff; }
.outline-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}