CODEWITHSUNDEEP
cssbutton
Max R
Max R

Reputation: 109

How to change image of a button on hover

I want to be able to when the user hovers over the button the button image changes. Thanks 

<input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="49.5px" padding = "0px"/>


 #button {
    text-align:center;
    float:left;

    }

    #button:hover {
    text-align:center;
    float:left;
    background-image: url('qmb2.png')

    }

Upvotes: 1

Views: 811

Answers (2)

Shehary
Shehary

Reputation: 9992

This should resolve the problem, remove the image from HTML input

<input type="image" name="saveForm" class="btTxt submit" id="button" height="49.5px" padding = "0px"/>

and put it here in CSS

#button {
    text-align:center;
    float:left;
    background-image: url('qmb.png')
}

#button:hover {
    text-align:center;
    float:left;
    background-image: url('qmb2.png')
}

Fiddle

Upvotes: 2

Dario
Dario

Reputation: 280

#button:hover {
background-image: url('qmb2.png')
}

also, on hover you don't need to repeat again all the properties

Upvotes: 1

Related Questions