<Recreated

"The Joy of React"s CSS Houdini Button

August 30, 2023

<joyofreact.com
Like
<
<div className='h-screen flex items-center justify-center'>
  <div className='magic-button-wrapper'>
    <button
      className='magic-button'
      style={{
        ...colorStyles,
        transition: transitionStyles,
        background: `conic-gradient(from 180deg at 50% 125%, ${gradientColors})`,
      }}
    >
      <span>Let’s go!</span>
    </button>
  </div>
</div>