Circle Surface Button

1export function CircleSurfaceButton() {2  return <button type="button" className="circle-surface-button"><span>CLICK HERE</span><span aria-hidden="true" /></button>;3}

1.circle-surface-button {2  position: relative;3  display: grid;4  width: 128px;5  height: 128px;6  place-items: center;7  overflow: hidden;8  border: 1px solid light-dark(#14181e,#f0f0f0);9  border-radius: 50%;10  background: transparent;11  color: light-dark(#14181e,#f0f0f0);12  cursor: pointer;13}14.circle-surface-button > span:first-child {15  position: relative;16  z-index: 1;17  font-size: 13px;18  transition: color .3s ease;19}20.circle-surface-button > span:last-child {21  position: absolute;22  inset: 0;23  border-radius: inherit;24  background: light-dark(#dfe3ea,#323232);25  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .5s ease;26}27.circle-surface-button:hover > span:first-child, .circle-surface-button:focus-visible > span:first-child {28  color: light-dark(#ffffff,#111);29}30.circle-surface-button:hover > span:last-child, .circle-surface-button:focus-visible > span:last-child {31  background: #f97316;32  transform: scale(1.1);33}34.circle-surface-button:focus-visible {35  outline: 2px solid #f97316;36  outline-offset: 4px;37}