Orange Circle Fill Button

1export function OrangeCircleFillButton() {2  return <button type="button" className="orange-circle-fill-button"><span>View all projects</span><span aria-hidden="true" /></button>;3}

1.orange-circle-fill-button {2  position: relative;3  display: inline-flex;4  align-items: center;5  justify-content: center;6  overflow: hidden;7  border: 1px solid #f97316;8  border-radius: 999px;9  background: #f973162b;10  padding: 16px 24px;11  color: #f97316;12  cursor: pointer;13  transition: transform .5s cubic-bezier(.16, 1, .3, 1);14}15.orange-circle-fill-button > span:first-child {16  position: relative;17  z-index: 1;18  font-size: 18px;19  font-weight: 500;20  transition: color .3s ease;21}22.orange-circle-fill-button > span:last-child {23  position: absolute;24  width: 240px;25  height: 240px;26  border-radius: 50%;27  background: #f97316;28  transform: scale(0);29  transition: transform .5s cubic-bezier(.16, 1, .3, 1);30}31.orange-circle-fill-button:hover, .orange-circle-fill-button:focus-visible {32  transform: scale(1.06);33}34.orange-circle-fill-button:hover > span:first-child, .orange-circle-fill-button:focus-visible > span:first-child {35  color: #111;36}37.orange-circle-fill-button:hover > span:last-child, .orange-circle-fill-button:focus-visible > span:last-child {38  transform: scale(1);39}40.orange-circle-fill-button:focus-visible {41  outline: 2px solid #f97316;42  outline-offset: 4px;43}