Stopwatch buttons and design

Is there a way to remove the big circle around the stopwatch so that it just shows the time elapsed? The circle is kinda hard to fit into a rectangular screen, at least from an asthetic point of view (imo) and takes up a lot of room.

Also, the start/stop buttons are relatively small and easy to miss. I’ve had to get athletes to restart on more than one occasion as I miss the buttons (my clumsy fingers are equally to blame though :grin:).

Don’t mean to complain but the proportions of the stopwatch design are not ideal for real-world use. The part that we interact with is small while the passive part is huge - shouldn’t it be the other way around?

Is there a way to add a custom start/stop action to a big fat button that I add myself as an image? Or CSS to reshape the watch in any way?

@darren - the other one :stuck_out_tongue: - did a bit of funky stuff with the Stopwatch using CSS in the below tutorial:

If I recall correctly, he also gives a few tips on how to actually identify the correct CSS classes.

4 Likes

Great thanks! I searched but didn’t see that, will check it out