Change a button image based on its value using CSS

Question

Two buttons are dynamically generated (they're out of my control). I would like to change the images of these buttons but I'll have to use CSS since I can't actually change the button code. I'm assuming I'll need to do this based on the CSS values if that's even possible. Here's the button code:

<button type="submit" class="btn btn-default" name="provider" value="Facebook" title="Log in using your Facebook account.">Facebook</button>

<button type="submit" class="btn btn-default" name="provider" value="Twitter" title="Log in using your Twitter account.">Twitter</button>

The two images that I wish to implement are: Facebook-Login.png and Twitter-Login.png. If this is possible with CSS can someone please post the code? Thanks, Chris.

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

4

You can use this awesome attribute selector

Read more about it here: http://css-tricks.com/attribute-selectors/

CSS

.btn-default[value="Facebook"] {
    background: url("Facebook-Login.png");
}

.btn-default[value="Twitter"] {
    background: url("Twitter-Login.png");
}

you might need to use background instead of background-image due to the fact that button uses background by default for gradient in most browsers. You also will want to check on mobile browsers like safari - and may need to use -webkit-appearance: none; to remove default styling... and maybe even border-radius: 0; to remove rounded corners.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 02 '14 at 05:48

sheriffderek

8,848
6
43
70

This worked great :) But, the little trick that js did hiding the anchor text turned out a lot better. Thanks for your help :) – DigitalRayne Mar 02 '14 at 06:14
That wasn't your question, but whatever. – sheriffderek Mar 02 '14 at 06:15
Watch out for your selector. It's not as specific as mine. You could have other buttons with those values that are also being affected. – sheriffderek Mar 02 '14 at 06:16

score 1 · Accepted Answer · edited May 23 '17 at 11:54

1

Yes, possible with css. Use the following:

.btn-default[value="Facebook"]{
    background:url("Facebook-Login.png");
    color: transparent; 
    width: 100px;
    height: 100px;
    line-height: 0; 
    font-size: 0; 
}

.btn-default[value="Twitter"]{
    background:url("Twitter-Login.png");
    color: transparent; 
    width:100px;
    height:100px;
    line-height: 0; 
    font-size: 0; 
}

You will need a css selector with the button and value set properly. Since you have text in the button, you will probably want to hide the text, so set color:transparent to hide the text but not the image.

You will have to change the width and height to the correct pixel amount.

Sources:

how do i hide anchor text without hiding the anchor

http://www.w3schools.com/cssref/sel_attribute_value.asp

Good luck

edited May 23 '17 at 11:54

Community

1
1

answered Mar 02 '14 at 05:52

js_gandalf

881
8
18

Awesome! :) Such a simple solution and I've been stressing for this for hours. It's always the simple things that cause the most problems. This solution worked the best by hiding the anchor text but it should be noted that I needed .btn-default and not "button" in the css. But for the general knowledgebase this was awesome. Thanks :) – DigitalRayne Mar 02 '14 at 06:13
Oops, your right. I'll make the change just to keep things consistent. – js_gandalf Mar 02 '14 at 06:16

score 0 · Answer 3 · answered Mar 02 '14 at 19:49

0

The js and seri answer is very based . this code is smart code . I give them a hover menu image code . just see it .

.batton{background: #00F;}

.batton:hover{background:url("Twitter-Login.png");}

answered Mar 02 '14 at 19:49

Change a button image based on its value using CSS

3 Answers3

CSS