提交按鈕頂部的圖標圖標

我正在研究Drupal中的提交按鈕。我使用從PHP生成的這個HTMLcode：提交按鈕頂部的圖標圖標

<div class="buttons"> 
    <span class="icon"> 
     <input type="submit" name="op" id="edit-submit-115" value="Vložiť do košíka" class="form-submit node-add-to-cart"" /> 
    </span> 
</div>

我希望按鈕具有漸變背景，通過在CSS中添加一些行來完成。

background: #F47C20; 
background: -webkit-gradient(linear, left top, left bottom, from(#F88E11), to(#F06015)); 
background: -moz-linear-gradient(top, #F88E11, #F06015); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'

現在，我想在按鈕的頂部放置一個圖像圖標，靠近文本。我一直在尋找一些線索，但找不到任何東西。

帶按鈕的頁面可以找到here。

來源

2011-11-06 user1031742

嗯，這裏是另外兩個想法：

您可以使用多個背景：http://tinkerbin.com/revBP8If

注意，我不得不刪除IE filter屬性，因爲它是導致CSS來休息失敗Tinkerbin。不幸的是，IE8或以下版本不支持多種背景。
更兼容的替代方法是使用常規a鏈接而不是input提交按鈕。您可以插入一個img和風格它看起來像一個按鈕，但你需要一點JavaScript來提交表單：http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

來源

2011-11-06 10:48:20

謝謝你，是有可能放置的頂部的圖標按鈕在這個例子中？ http://iwebunlimited.com/iweb-tips/css-buttons-in-iweb/我需要改變html才能使用它嗎？感謝您的幫助 – user1031742

是的，您需要更改HTML和您鏈接的示例完全是我在＃2中的含義。在該頁面上，他們不使用真正的'按鈕，而是使用常規的'a'鏈接和'span's。您不希望將圖像置於按鈕的頂部，因爲它覆蓋了按鈕的可點擊區域，並且可能導致沮喪的用戶無法點擊按鈕！使用圖像INSIDE將其更改爲'a'標籤可使所有內容都可點擊。 –

這就是我的意思：http://tinkerbin.com/JsBn722c –

提交按鈕頂部的圖標圖標

回答

相關問題