如何自定義按鈕（CSS，HTML）

Question

我想和圖片的按鈕，將內部和外部的按鈕顯示像下面這樣：

我不想使用圖像按鈕，因爲我將不得不製作至少5張圖片。 有沒有辦法用CSS做到這一點？

我使用ASP.NET & C＃

謝謝

Answer 1

我跟着砂鍋的建議和解決的問題。 ASP的按鈕可能不喜歡：之前，所以我把它包含在一個與CSS類的股利和正確的樣式，以得到我想要的結果。

page.aspx

<div class="bon"> 
<asp:Button ID="AddToCartBTN" runat="server" CssClass="bot" Text="CART" OnClick="clik"/> 
</div> 

的style.css

.bon { 
    position: relative; 
    padding: 6px 1em 1em 70px;  
    text-decoration: none; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); 
    display:block; 
    background-color: #91bd09; 
    height:30px; 
    z-index:100; 
} 
.bon:before { 
    content: ''; 
    position: absolute; 
    display: block; 
    background: url(path_to_image) no-repeat; 
    bottom: 0; 
    left: 0; 
    height: 100px; 
    width: 100px; 
    z-index:999;   
} 
.bon:hover 
{ 
    background-color: #749a02; 
} 

.bot { 
    width:100%; 
    border:none; 
    background-color:transparent; 
    padding:5px 10px; 
    color: #fff; 
    font-size: 24px; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
    border-bottom: 1px solid rgba(0,0,0,0.25); 
    cursor: pointer; 
} 

這樣做，我可以使用ASP的功能，而無需改變工作方式。

Answer 2

更新：您可以將按鈕標籤上使用僞元素。使按鈕的CSS位置：相對，那麼你可以絕對定位內部僞元素，使其彈出頂部。

然後向按鈕添加左邊距，以便文本不會位於圖像下方。

http://jsfiddle.net/j1zLb8n9/1/

button { 
    position: relative; 
    padding: 1em 1em 1em 70px; 
    border: 1px solid #333; 
    background: #ccc; 
} 
button:before { 
    content: ''; 
    position: absolute; 
    display: block; 
    background: url(http://placehold.it/60x90/3b3b3d) no-repeat; 
    bottom: 0; 
    left: 0; 
    height: 90px; 
    width: 60px; 
}