如何自定义按钮（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; 
}