html - 在 Html 和 Css 中使用图像作为按钮

Question

我一直在使用游戏 Assets 集合来构建游戏。现在出现的主要问题是如何包含用户界面按钮。

目前，一个按钮是不同渐变和某种字体的集合。我曾尝试将图像渐变转换为背景属性，但未能成功，而且所使用的字体是由图像表示的字符集合。

解决此问题的最佳做法是什么？使用图像作为按钮？什么是正确的语义标记？

Example of a Button

按钮的语义

谢谢!对于这个问题的回答，但不是关于如何做的；但关于正确的语义标记。

目前我已经通过以下似乎合理的设置解决了它。

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

Answer 1

尝试如下

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