如何自定义按钮（CSS，HTML）

Question

我想创建一个按钮，其中包含一个将在按钮内外显示的图片，如下所示：

我不想将图像用于按钮，因为我必须制作至少5张图像。 有没有办法用css做到这一点？

我正在使用ASP.NET＆amp; C＃

谢谢

Answer 1

更新：您可以在按钮标记上使用伪元素。使按钮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;
}

Answer 2

我遵循了marmite的建议并解决了这个问题。 ASP的按钮可能不喜欢：之前所以我把它包含在一个带有css类bon的div中并且正确地设计它以获得我想要的结果。

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的功能，而不必改变它的工作方式。