Advice generator app - Next.js + Tailwind + Shadcn

I struggled a bit with the position of the button. I found out the browser positions the left edge of your button at the 50% mark of the parent container. This means the button starts at the center and extends to the right.

To truly center it, you need to move the button backwards (to the left) by exactly half of its own width. Using -translate-x-1/2 fixes it!

<button 
  onClick={handleNewAdvice}
  disabled={isLoading}
  className={`absolute -bottom-8 left-1/2 -translate-x-1/2 w-fit p-5 bg-primary-green-300 rounded-full cursor-pointer duration-200 ${!isLoading && 'hover:shadow-neon hover:shadow-primary-green-300'}`}
  aria-label="Generate new advice"
>