CSS Sprite Not Working in CodeIgniter Submit Button

Question

I am trying to do two things:

1. Replace a regular submit button in my CodeIgniter view (see code below) with a sprite button with roll over effects.
2. Submit my CodeIgniter form

<input type="submit" name="submit" value="Search" class="button" />

My sprite images (normal and hover states) both do not display using the code above. However, if I comment it out, and replace it with the following, it displays correctly, however I cannot submit my form:

 <p class="button"><a href="#null"></a></p>

Here is my css:

.button {
    display:block;
    width:135px;
    height: 35px;
    text-indent:-9999px;
}
.button a {
    display:block;
    width: 100%;
    height: 100%;
    background:transparent url(../images/button-sprite.gif) no-repeat top left;
    outline:none;
}
.button a:hover {
    background-position: 0 -35px;
}

What am I doing wrong?

---

SOLUTION:
Thank you @AdityaSaxena for your alternative solution. I found another solution too:

my.css

.button {
    display:block;
    width:135px;
    height: 35px;
    text-indent:-9999px;
    background:transparent url(../images/button-sprite.gif) no-repeat top left; 
}

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

my.html

// ...
<input type="submit" name="submit" value="Search" class="button" />
// ...

Answer 1

1. You are not able to submit the form because you replaced your <input type="submit" /> with an anchor tag. You have to add the capability to submit a form to your <a> tag
2. .button a was not working because you did not have any <a> tag inside your <input type="submit"> tag which is what was expected when you used .button a

Few changes from the html and js and things will start working for you.

Your new HTML stays intact.

<p class="button"><a href="#null"></a></p>

Your JS / Jquery if you can use it becomes this:

$('.button a').on('click', function(){
  $(this).closest('form').submit();
});