Inset Circle Button

1export function InsetCircleButton() {2  return <button type="button" className="inset-circle-button"><span>View Project</span><span aria-hidden="true" /></button>;3}

1.inset-circle-button {2  position: relative;3  display: grid;4  width: 128px;5  height: 128px;6  place-items: center;7  overflow: hidden;8  border: 1px solid #f0f0f0;9  border-radius: 50%;10  background: #1f1f1f;11  color: #111;12  cursor: pointer;13}14.inset-circle-button > span:first-child {15  position: relative;16  z-index: 1;17  font-size: 13px;18  font-weight: 700;19  transition: color .42s ease;20}21.inset-circle-button > span:last-child {22  position: absolute;23  inset: 4px;24  border-radius: 50%;25  background: #f0f0f0;26  clip-path: circle(75% at 50% 50%);27  will-change: clip-path;28  transition: clip-path .52s cubic-bezier(.16, 1, .3, 1);29}30.inset-circle-button:hover > span:first-child, .inset-circle-button:focus-visible > span:first-child {31  color: #f0f0f0;32}33.inset-circle-button:hover > span:last-child, .inset-circle-button:focus-visible > span:last-child {34  clip-path: circle(0% at 50% 50%);35}36.inset-circle-button:focus-visible {37  outline: 2px solid #f97316;38  outline-offset: 4px;39}