html - 将图像添加到 css3 按钮并提交

Question

我在网上搜索并找到了一个 css3 按钮生成器，它生成了我想要的按钮。但是当我得到代码并在我的代码中使用它时，我发现该按钮无法提交。当我将给我的按钮代码从 css 按钮生成器站点更改为真正的按钮时，它能够提交但无法将图像加载到按钮的左侧。我将从网站生成的按钮 html 标记为 html 1，将我自己的 html 按钮标记为 html 2。

HTML 1

<a inpuu class="button" href="#">Click to send</a>

HTML 2

<input name="submit" type="button" value="Click to send"  class="button"/>

CSS

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 6px 24px;
    border: 1px solid #487dbe;
    border-radius: 4px;
    background: #75cbff;
    background: -webkit-gradient(linear, left top, left bottom, from(#75cbff), to(#487dbe));
    background: -moz-linear-gradient(top, #75cbff, #487dbe);
    background: linear-gradient(to bottom, #75cbff, #487dbe);
    text-shadow: #2d4e77 1px 1px 1px;
    font: normal normal normal 13px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #5a9ced;
    background: #8cf4ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#8cf4ff), to(#5696e4));
    background: -moz-linear-gradient(top, #8cf4ff, #5696e4);
    background: linear-gradient(to bottom, #8cf4ff, #5696e4);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #487dbe;
    background: -webkit-gradient(linear, left top, left bottom, from(#487dbe), to(#487dbe));
    background: -moz-linear-gradient(top, #487dbe, #487dbe);
    background: linear-gradient(to bottom, #487dbe, #487dbe);
}
.button:before{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 4px -6px -4px;
    position: relative;
    top: 0px;
    left: -12px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABbElEQVRIie3VMUtbURQH8J9RHEIQkRIcRKuDs5NfwKV1sYOunTKV4iDiV3BwED+AOEhwcnCStkudHBxK6eAiKF0KJUOLZAhpiMO9wWdS43tJJvEPj3fveef+zzn/e899vOAJDPexdg5raOLXYNK5xziOI/kFph5zzPUYYBSTcfwK+R55umIBe3jTzWkkBdFrHAlZJ/EHB/iaPbd7FLCPOhqoCrq3nipK/QTYjMRbQrXv2wI08TfxPRMWcY2TWMk0viWIG9jAGW5RxqouJ6od7wSNp+O8FElbAS6ifQo7qAlSrmetpIXTBHlNSu3T9kEOxcT8n3CKBhZgtM03j5WUa1OhgB+CPGVhUxuY75WwvbIiLgXti/gSg+3qbMAHGPqPbQwfMZOwTQhXQgWzWBYuu99YwlWW7CdjhnWdTfUp+uRxGG3bWSvIxSBFnVJV8DOOF3COG7yN74HjUKj0w2MO/fzR4LtQ1WdhP54h7gCh/1HB9CpO6gAAAABJRU5ErkJggg==") no-repeat left center transparent;
    background-size: 100% 100%;
}

当图像充当提交按钮时，如何使图像显示在 HTML2 左侧。

Answer 1

不需要那么难。使用 HTML5 <button>标签。在其中，您可以放置​​ HTML 元素和很酷的东西。像这样使用它:

button
{
  display:inline;
  cursor:pointer;
  }

#kittenButton {

  width:100px;
  display:inline;
  vertical-align:middle;
  
}

<button>
  <img id="kittenButton" src="http://placekitten.com/1000/1000" />&nbsp;Click me to see kitten pictures!
</button>

此外，您仍然可以使用它来提交。只需添加 type="submit"或 onclick="document.forms['form_name'].submit()"到你的按钮。

希望这对您有所帮助!