Use an Image as Button in Html and Css

Question

I have been using a Game Assets collection to build a Game upon. The main problem that now arises is how to include the User Interface Buttons.

Currently a Button is a Collection of different Gradients and a certain Font. I’ve tried to convert the Images Gradient to a Background Property but have failed to do so plus the Font that is being used is a collection of Characters represented by Images.

What is the best practice to solve this problem? Use the Images as Button? What is the correct Semantic Markup?

Example of a Button

Semantic of the Button

Thnx! for the response on this question, but it isn't about how to do it; but about the correct Semantic Markup.

Currently I've solved it with the following setup which seems reasonable.

<label>
    <img src="/aButton.png" alt="Send Message">
</label>

please check this link http://stackoverflow.com/questions/20904817/adding-an-image-to-submit-button-using-css — Pardeep Pathania, Apr 19 '16 at 08:02
I've added my own solution. For buttons I use a similar approach; — , May 11 '16 at 15:11

score 2 · Answer 1 · answered Apr 19 '16 at 08:05

Try as follows

HTML

<input type="submit" id="search" name="submit" alt="search" value="">

CSS

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
input#search:hover    {
    background:url(../search-icon2.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
    border: 0;
    }

score 1 · Answer 2 · answered Apr 19 '16 at 08:14

1

If you want to use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

<button type="submit"><img></img></button>

answered Apr 19 '16 at 08:14

Tapasa

66
7

Use an Image as Button in Html and Css

2 Answers2