Coin flip toggle
A coin hops and spins in 3D to go from the euro side to the dollar side.
Settings
Code
<label class="uvq03-con"><input type="checkbox" role="switch"><span class="st"><span class="cn"><b class="f a">€</b><b class="f b">$</b></span><i class="sd"></i></span>Prices in dollars</label>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 Toggles
See all TogglesWhere to use it
This switch is a two-sided coin: a gold face with the euro sign and a silver face with the dollar sign. Changing it tosses the coin up a little and spins it several times in 3D before it lands on the other face, while its shadow shrinks and grows on the ground. Faces use backface-visibility, and a short script replays the hop. It suits currency selectors, pricing pages and shops.
The two colors set the metal of each face. Swap the symbols in the HTML for pounds, yen or any pair of options, and keep the label clear about what the active side means.