Yellow Fill Preview Button

1export function YellowFillPreviewButton() {2  return (3    <button type="button" className="yellow-fill-preview-button">4      <span className="yellow-fill-preview-button-label">Preview in browser</span>5      <span className="yellow-fill-preview-button-fill" aria-hidden="true" />6    </button>7  );8}

1.yellow-fill-preview-button {2  appearance: none;3  position: relative;4  display: inline-flex;5  align-items: center;6  justify-content: center;7  overflow: hidden;8  border: 1px solid #f0f0f0;9  border-radius: 999px;10  background: transparent;11  padding: 12px 24px;12  color: #f0f0f0;13  font-family: Arial, Helvetica, sans-serif;14  cursor: pointer;15}16.yellow-fill-preview-button-label {17  position: relative;18  z-index: 1;19  font-size: 16px;20  font-weight: 500;21  transition: color .3s ease;22}23.yellow-fill-preview-button-fill {24  position: absolute;25  top: 0;26  bottom: 0;27  left: 0;28  width: 0;29  background: #f97316;30  transition: width .5s cubic-bezier(.16, 1, .3, 1);31}32.yellow-fill-preview-button:hover .yellow-fill-preview-button-label,33.yellow-fill-preview-button:focus-visible .yellow-fill-preview-button-label {34  color: #111;35}36.yellow-fill-preview-button:hover .yellow-fill-preview-button-fill,37.yellow-fill-preview-button:focus-visible .yellow-fill-preview-button-fill {38  width: 100%;39}40.yellow-fill-preview-button:focus-visible {41  outline: 2px solid #f97316;42  outline-offset: 4px;43}