Question

我在网上搜索，我找到了一个css3按钮生成器，它生成了我想要的i按钮。但是当我得到代码并在我的i中使用它时发现该按钮无法提交。当我将从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()"添加到按钮即可。

希望这有帮助！

Answer 2

尝试<button>标记。 <a>用于执行某些链接，如果没有javascript，则无法使用此提交。 <input type="submit">较早用于提交。这是HTML5标准的方法。此外，它必须进入<form>标记才能提交：

<button type="submit" class="button">Click to Send</button>

小提琴：http://jsfiddle.net/nikoloza/nck2o2y7/2/

Answer 3

按钮样式不适用于您的按钮，因为您使用的输入标记不能：before或：after，这是按钮生成器用于图像的内容（通常，任何没有开口的标记）标签和结束标记不能从伪选择器之前和之后受益，并且，如果为输入或图像创建结束标记，则不起作用。）

简单地说“onclick = this.parent.submit（）”;在标签上，假设您的表单是按钮的第一个父

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

3 个答案: