CODEWITHSUNDEEP
htmlcssdreamweaver
John Smittheeerrs
John Smittheeerrs

Reputation: 103

Change the background of a button on hovering with transparent background

I think the title is pretty clear to be honest so what I want is that when the user hovers over the button the background image changes. I did not work with specific classes because the background: transparent messes it up.

This is the code for the button:

<button type="submit" style="border: 0; padding: 0px; margin-top: -1px; background: transparent">
    <img src="../images/login open.png" alt="Inloggen" width="130" height="29" />
</button>

Thanks for looking into it ;)

Upvotes: 0

Views: 1010

Answers (1)

Ryan Miller
Ryan Miller

Reputation: 121

Are you not using a transparent PNG? You can avoid using background:transparent altogether and instead, just use button:hover to change the background.

HTML:

 <button type="submit"></button>

CSS:

 button {
 background:url(yourImage.png) no-repeat 0 0;
 height: 29px;
 width: 130px;
 border:none;
 }

 button:hover {
 background:url(yourImage.png) no-repeat 0 0;
 }

See http://jsfiddle.net/Hc5Dz/

Upvotes: 2

Related Questions