Adding hyperlink to button sprites

Hi,
I have created a button sprite and it works (changes state) when I mouse over it, however I cannot figure out how to make it hyperlinked.
site URL: http://temp.webdesignperth.com.au/responsive-website-design/

See ‘Watch the video’ button.

Any help appreciated.

<a href="http://temp.webdesignperth.com.au"><div class="button-sprite">
</div>
</a>

.button-sprite {
width: 255px;
height: 52px;
background-image: url(‘path-to-image’);
background-position: top;
}

.button-sprite:hover {
background-position: 0 52px;
}

<a href="http://temp.webdesignperth.com.au" class="button-sprite">
Watch the video
</a>

.button-sprite {
  display: block; //could also do display: inline-block
  width: 255px;
  height: 52px;
  background: url('path-to-blue-gradient-image') 0 0 no-repeat;
 }

 .button-sprite:focus, .button-sprite:hover {
   background-position: 0 52px;
 }

Many thanks for your answer to this - works great now!