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 stackoverflow.com/questions/20904817/… — Pardeep Pathania
– Pardeep Pathania, Commented Apr 19, 2016 at 8:02
I've added my own solution. For buttons I use a similar approach; — user6044998
– user6044998, Commented May 11, 2016 at 15:11

Arshid KV · Accepted Answer · 2016-04-19 08:05:21Z

2

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;
    }

answered Apr 19, 2016 at 8:05

Arshid KV

10k3 gold badges37 silver badges37 bronze badges

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

Comments

Tapasa · Accepted Answer · 2016-04-19 08:14:04Z

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, 2016 at 8:14

Tapasa

767 bronze badges

Collectives™ on Stack Overflow

Use an Image as Button in Html and Css

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related