# Stopwatch buttons and design

**URL:** <https://community.glideapps.com/t/stopwatch-buttons-and-design/37108>\
**Category:** Ask for Help\
**Created:** [January 13, 2022, 7:57am UTC](https://community.glideapps.com/t/stopwatch-buttons-and-design/37108 "2022-01-13T07:57:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan76](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan76/32/15696_2.png) [@Dan76](https://community.glideapps.com/u/Dan76)\
**Post date:** [January 13, 2022, 7:57am UTC](https://community.glideapps.com/t/stopwatch-buttons-and-design/37108/1 "2022-01-13T07:57:58Z")

</div>

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 😁).

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?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 13, 2022, 8:12am UTC](https://community.glideapps.com/t/stopwatch-buttons-and-design/37108/2 "2022-01-13T08:12:09Z")

</div>

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

> [@stopwatch Show Game Time / Timer (with a modified stopwatch)](https://community.glideapps.com/t/show-game-time-timer-with-a-modified-stopwatch/34256):
>
> Background My [#TeamSeas Matching Game](https://community.glideapps.com/t/card-match-game-glide-games-teamseas/33620) has a timer that shows your elapsed time playing the game. If your game time is fast enough, you make it on the leaderboard. play_button See in Action Tutorial A few people asked how I added the game timer, so I made this video to show you how: [[How to Add a Timer to Your Glide App (plus custom CSS styling)] ](https://www.youtube.com/watch?v=SAqqIMlsWCk)play_button Use Custom CSS at your own risk grin

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

---

<div class="post-metadata">

**Author:** ![Dan76](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan76/32/15696_2.png) [@Dan76](https://community.glideapps.com/u/Dan76)\
**Post date:** [January 13, 2022, 8:22am UTC](https://community.glideapps.com/t/stopwatch-buttons-and-design/37108/3 "2022-01-13T08:22:28Z")

</div>

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