In my search for a nice clean ubuntu 11.04 countdown button for this website I came across this:

and there are some really good ones but “David Laurell’s simple design” stood out:

This design aims to be as simple and like the Ubuntu site’s design as possible. Feel free to change it to your liking. It is rendered in a HTML5 canvas element so Javascript and a modern browser is needed to view it.

Because the banner is rendered by javascript, it works with any date before and after the release.

Ok, so what are the good things:

  • HTML5
  • Clean looking
  • HTML5
  • Shows the number of days without needing 50 something images in the directory
  • HTML5

Bad things:

  • none

So that was easy! I went and grabbed the code, stuck it in a page, changed some simple settings around and stuck it up on the net and…

Differences in opinion

then I noticed the slight difference in the two, besides the difference in the boldness of the main text, the problem was the text in the top right would load fine in chrome, but in firefox, not so much.

This is a small but noticeable issue that hits me right in the OCD >.< never mind, maybe it’s a bug, I scoured the Internet twice looking for why it would work in browser but not another, out of the blue my dad comes into the room, asking what I’m up to, after I explain the trivial issue he suggests that “it’s probably the colour” and leaves.

ctx.fillStyle = “666”

hrmm…shouldn’t there be a # there?

ctx.fillStyle = “#666

refresh page, sigh…

So there you go, just one # can make all the difference and you have a button for your website.

All credit and love goes to David Laurell, for making such an awesome banner in code that is very clean and easy to work with.

The ubuntu logo is ofc copyright canonical and thanks to my dad for figuring out the issue so quickly.

Download the script:

If you wish to simply hotlink to the button you can use the following code:

2014 edit: countdown no longer functional

Have fun :)