將圖像添加到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按鈕並提交

回答

相關問題