Tally counter button
A chrome hand tally counter: each press pushes the plunger and rolls the number wheels forward by one.
Settings
Code
<button class="uvq01-tly" type="button"><span class="win" aria-hidden="true"><span class="wh"><span class="col" style="--d:0"><i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i><i>0</i></span></span><span class="wh"><span class="col" style="--d:1"><i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i><i>0</i></span></span><span class="wh"><span class="col" style="--d:2"><i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i><i>0</i></span></span><span class="wh"><span class="col" style="--d:7"><i>0</i><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i><i>7</i><i>8</i><i>9</i><i>0</i></span></span></span><span class="t">Clap</span><span class="p1" aria-hidden="true">+1</span><span class="sr">127</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.
More in Buttons
See all ButtonsWhere to use it
Hand tally counters are used to count people at doors and laps on a track, and this button copies the object closely: brushed chrome body, red plunger on top and four number wheels behind a dark window. Every click presses the plunger, rolls the wheels with a small overshoot, carries over from nine to zero and floats a +1 above. Use it for claps, votes, likes or attendance.
The main color tints the plunger and the floating +1, the secondary color sets the digits on the wheels. The number lives in the script, so you can start it from your own data, and screen readers hear the new total as part of the button name.