I am making an HTML5 video player, but I need to put a play icon on my button and the old method no longer works. Also, I cannot use background-image:url('Filename'); because I also have a gradient, and when I add the background-image it overrides my gradient. Any suggestions?
Add a comment
|
2 Answers
you can do what twitter bootstrap does and use an <i class="some-icon-class"></i> in the content to easily add icons.
the CSS for that <i> tag is set to a block with a certain height and width, and has a background image.
they use it like this:
<button ...><i class="plus-icon"></i> Add New Item</button>
check it out: http://getbootstrap.com/2.3.2/base-css.html#icons
4 Comments
jacob.3336
Where you have "Add New Item", is this where I would put my image tag? But I will definitely try this method.
Kristian
no, you dont use an image tag at all. you apply a background image to the CSS of the
<i> tag itself.jacob.3336
Will this override my gradient?
Kristian
it shouldn't. twitter bootstrap's buttons have gradients in addition to the actual icon.
You have not specified what your button element tag is exactly. But since you say "html5" I will assume you are using the actual "button" tag. Maybe try this:
<button onClick="eventHandler();"><img src="button_image.png" /></button>
Or perhaps you are looking for "more proper" html5 where img tag is not used and all styling is strictly in the CSS?
2 Comments
jacob.3336
Yes, an actual button tag. I want to put an image on that and keep my gradient.
Justin
Ok, cool. So if putting a nested img tag is ok for you, then use png or gif with transparency for most of the button image. Just put a little icon in the middle and possibly some borders or shadows around the image edges.