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

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

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左侧，同时充当提交按钮。

来源

2014-11-06 blay

它并不需要那么辛苦。使用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()"添加到您的按钮。

希望这会有所帮助！

来源

2014-11-06 18:04:28

尝试<button>标记。 <a>是做一些链接，没有JavaScript，你不能提交这个。 <input type="submit">较旧用于提交。这是通过HTML5标准来完成的方式。此外，它必须为<form>标签不提交：

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

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

来源

2014-11-06 18:05:53 nikoloza

在您的按钮的按钮样式doesn't工作，因为你使用的输入标签，不能有：before或：之后，这就是按钮生成器用于图像的内容（通常，任何没有开始标记的标记和结束标记都不能从伪选择器之前和之后获益，而且，如果创建了闭合，则不起作用标记输入或图像）。

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

来源

2014-11-06 18:07:42 sergio0983

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

回答

相关问题