button with image that defined in the css

Question

I would like to make a button (clickable element) without text but with an image.
I want the image to be defined in the css.

If I use Image element, the image cannot be defined in the css.
Using div looks like irrelevant.

something like:

<elem></elem>

elem {
    backround-image:url(img.jpg);
}

How can I do this? What is elem?

Unless you want to add javascript to your page, elem can only be an a element if you want it to act like a link. — Niklas
– Niklas, Commented Jun 4, 2011 at 14:25
@Niklas: I don't see any connection between javascript and a element. — Naor
– Naor, Commented Jun 4, 2011 at 14:30
Well any element on a page can be clicked, but if you expect it to actually do something, it will have to be a link or submit button, unless you attach click handlers on it. — Niklas
– Niklas, Commented Jun 4, 2011 at 14:32
@Niklas: I don't care attach event handlers. This is only html and css question. I am looking for the best approach to do so. — Naor
– Naor, Commented Jun 4, 2011 at 14:37

Itay Moav -Malimovka · Accepted Answer · 2011-06-04 14:34:02Z

2

You can use a button element by reseting it's defaults CSS, Or use DIV.
Button is more semantic.
Obviously you will still need to add an event handler to the onclick event for it to do something.

Example:

<style>
.myburron{
   background-image: url('../myimage.jpeg');
   width: Xpx;
   height:Ypx;
   display: [not sure, think inline-block is best];
   border-style: none;
   background-color: none;
}
</style>

...
...
...
<button class="myburron"> </button>

edited Jun 4, 2011 at 14:34

answered Jun 4, 2011 at 14:25

Itay Moav -Malimovka

53.8k68 gold badges198 silver badges292 bronze badges

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

2 Comments

Naor Over a year ago

what do you meen by "button element"? I need the html to be valid. If the button element requires imageSrc attribute it won't fit.

Itay Moav -Malimovka Over a year ago

No- most html elements can have a background image

Lion King · Accepted Answer · 2017-07-08 13:41:47Z

2

HTML:

<input type="button" name="btn" id="btn">

CSS:

#btn{
    width: 100px;
    height:40px;
}
#btn:hover{

    background-image: url('images/button_hover.jpg');
}

#btn:active{
    background-image: url('images/button_active.jpg');
}

edited Jul 8, 2017 at 13:41

answered Jun 4, 2011 at 14:32

Lion King

34.1k26 gold badges92 silver badges160 bronze badges

1 Comment

Teneff Over a year ago

just keep in mind that :hover is not supported in IE6 for elements different than <a>

Collectives™ on Stack Overflow

button with image that defined in the css

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related