John Smittheeerrs John Smittheeerrs - 1 year ago 149
CSS Question

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" />

Thanks for looking into it ;)

Answer Source

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


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


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

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download