HTML + CSSButtons

Golf putt button

On click the ball rolls across the green, drops into the cup and the flagstick lifts for a moment.

Settings

16px
1x

Code

<button class="uvq01-glf" type="button"><span class="t">Book a tee time</span><span class="gr" aria-hidden="true"><span class="ln"></span><span class="cup"></span><span class="pole"><i></i></span><span class="ball"></span></span></button>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Buttons

See all Buttons

Where to use it

A pill of mown grass with lighter stripes, a cup, a flag that flutters in the breeze and a dimpled ball waiting on the right. Hovering draws the putting line, and a click sends the ball rolling with a slowing curve until it lips into the hole and the flagstick pops up. Ideal for golf clubs, tee time bookings and sports clubs.

The main color is the grass and the secondary color is the flag, so a links course in deep green or a mini golf in turquoise and yellow are one change away. Speed sets how long the putt takes, and the ball returns by itself.