How to add an image to a custom CSS button

Question

I have the following button HTML code:

<button class="button" style="width: 95%;">PHYSICIANS</button>

It is customized by CSS3 here:

button {
    border: 1px solid rgba(0,0,0,0.3);
    background: #eee;
    color: #515151;
    font-size: 24px;
    font-weight: 700;
    padding: 21px 34px;
    text-decoration: none;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
    background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
    padding:0;
    border:0;
}
button:hover, a.button:hover {
    background: #cbcbcb;
    cursor: pointer;
}
button:active, a.button:active {
    background: #ccc;
    padding: 22px 34px 20px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    text-shadow: none;
}

Which displays the following button:

How can I modify the above code, so I can add a thumbnail image to it. Something like this:

The default image size is 260X190 but I want to size it up so it fits inside the button.

Siyah · Accepted Answer · 2014-03-04T21:54:43.417

2

You can use the pseudo-element :before to do this.

See this working demo I made: http://jsfiddle.net/A7UsX/1/

button:before {
    content: " ";
    display: inline-block;
    background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
    height: 30px;
    width: 50px;
}

I have made a red background to show you what I did. Change the background to the image you would like and change the height and width to your likings.

edited Mar 04 '14 at 21:54

answered Mar 04 '14 at 21:36

Siyah

2,852
5
37
63

Thank You... I will go ahead and test it out. – Si8 Mar 04 '14 at 21:40
Maybe I am doing something wrong but I don't see the image :/ http://www.responsinator.com/?url=http%3A%2F%2Fwmg-ektron2-dev%3A81%2Fwmgwebsite%2FDefault.aspx – Si8 Mar 04 '14 at 21:47
OOOOPS... It's a internal server website :/ Sorry! Here is a pastebin of what I have. On the DEV tool, I can see the stylesheet and also see the image being imported but it doesn't get shown: http://pastebin.com/KCZxmuKM – Si8 Mar 04 '14 at 21:52
It is working. Check my edit. I have made it more clear to you by adding the image. – Siyah Mar 04 '14 at 21:55
Weird, I used your image it's fine. The text is not vertically centered. How can I achieve that? I think something wrong with the way I am importing my image? – Si8 Mar 04 '14 at 22:05
I changed the line from yours to `background: url("theImages/ste.png") no-repeat;` and the image disappears. – Si8 Mar 04 '14 at 22:07
Glad it helped. Please accept the answer so that we can close this topic off. – Siyah Mar 04 '14 at 22:40

Kheema Pandey · Answer 2 · 2014-03-04T21:42:22.107

2

you could use :before pseudo element.

button:before{content: ' '; display:inline-block;  position:absolute; content:url(http://lorempixel.com/25/25); }

I'll suggest you to use a SVG image rather than using jpg or png format. so in this case you can call the image using background-image and give a positioning too.

button:before { content:''; display:inline-block; height:1em; width:1em; 
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat;  }

here you can check the working Demo. http://jsbin.com/damujidi/1/edit

edited Mar 04 '14 at 21:42

answered Mar 04 '14 at 21:37

Kheema Pandey

9,977
4
25
26

check the other solution.. this way you can move the image as well. please replace `svg`` with jpg` or `png` what format you using.. – Kheema Pandey Mar 04 '14 at 21:44
What would be the advantage of the SVG over PNG/JPG? – Si8 Mar 04 '14 at 21:45
SVG is scalable format. they are more sharp rather than png or JPG ..the other benefits is it won't lost quality if you scale them – Kheema Pandey Mar 04 '14 at 21:46
Maybe I am doing something wrong but I don't see the image :/ http://www.responsinator.com/?url=http%3A%2F%2Fwmg-ektron2-dev%3A81%2Fwmgwebsite%2FDefault.aspx – Si8 Mar 04 '14 at 21:46
even I can't see the page.. this display message coming "This page can’t be displayed" – Kheema Pandey Mar 04 '14 at 21:48
OOOOPS... It's a internal server website :/ Sorry! Here is a pastebin of what I have. On the DEV tool, I can see the stylesheet and also see the image being imported but it doesn't get shown: http://pastebin.com/KCZxmuKM – Si8 Mar 04 '14 at 21:50
please specify the actual height and width to image not `1em` – Kheema Pandey Mar 04 '14 at 21:51
Yes, exactly what you said :/ – Si8 Mar 04 '14 at 21:52
use the actual image `height` and `width` in CSS. – Kheema Pandey Mar 04 '14 at 21:54
You can't see it because it's internal unfortunately but here is the code from pastebin: http://pastebin.com/nSm2AvLQ – Si8 Mar 04 '14 at 21:59
what's the use of this class `defbtn`? – Kheema Pandey Mar 04 '14 at 22:01
No use. I can remove it if need be. I did add the image I am using in my question, if you want to test. – Si8 Mar 04 '14 at 22:02
I am looking at your code, really some serious problem – Kheema Pandey Mar 04 '14 at 22:04
Ok... I am all ear to listen :) – Si8 Mar 04 '14 at 22:06
I see you forgot to add these line in your `content: ' '; position:absolute;` in `button:before` – Kheema Pandey Mar 04 '14 at 22:09
aaaahhhhh, it's working but now the image is centered in the button and extends out even after using width and height. – Si8 Mar 04 '14 at 22:13
doesn't image is besides the text? – Kheema Pandey Mar 04 '14 at 22:14
Nope. The image overlaps the text :/ – Si8 Mar 04 '14 at 22:15
share the screenshot please – Kheema Pandey Mar 04 '14 at 22:16
I am leaving for the day... I might have it working another person's CSS but If it still gives problem I will surely post a screenshot tomorrow. Thanks for the help :) – Si8 Mar 04 '14 at 22:19
in the meantime can you accept this answer. because example shows its works – Kheema Pandey Mar 04 '14 at 22:21
try to remove `position:absolute;` and see if it works – Kheema Pandey Mar 04 '14 at 22:23

score 2 · Answer 3 · edited May 23 '17 at 12:16

You can add a <i> as commonly used in bootstrap [ref1] [ref2].

<button class="button">
    <i class="btnbg"></i>PHYSICIANS
</button>

CSS:

.btnbg {
    background-image: url('https://i.stack.imgur.com/QgIOj.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    width: 70px;
}

.button {
    line-height: 35px;
    vertical-align: middle;
}

see jsFiddle

How to add an image to a custom CSS button

3 Answers3