lundi 20 avril 2015

Image tag with background image has a border

I have an HTML button that shows an icon on top of some text:

<button class="btn btn-link center">

    <img class="connect">
    <br/>
    CONNECT

</button>

My image states are defined in CSS:

.connect{
    background-image:url('../images/connect_rest.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
} 

.connect:hover{
    background-image:url('../images/connect_hover.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}

.connect:active{
    background-image:url('../images/connect_active.png');
    background-repeat:no-repeat;
    width:60px;
    height:60px;
}

So, why is there a white border around my box? I get it, I know it's funky that I'm setting a background-image on an image element. But, I need this compatible with IE8 so I can't set the "content" property in CSS.

Thanks for any helpful tips.

Aucun commentaire:

Enregistrer un commentaire