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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 2, 2014 at 5:48

sheriffderek

9,0736 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DigitalRayne Over a year ago

This worked great :) But, the little trick that js did hiding the anchor text turned out a lot better. Thanks for your help :)

sheriffderek Over a year ago

That wasn't your question, but whatever.

sheriffderek Over a year ago

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.

Community · Accepted Answer · 2017-05-23 11:54:31Z

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, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 2, 2014 at 5:52

js_gandalf

8919 silver badges18 bronze badges

2 Comments

DigitalRayne Over a year ago

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 :)

js_gandalf Over a year ago

Oops, your right. I'll make the change just to keep things consistent.

user3369391 · Accepted Answer · 2014-03-02 19:49:01Z

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 .

Collectives™ on Stack Overflow

Change a button image based on its value using CSS

3 Answers 3

CSS

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

CSS

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related