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

Question

我想制作一个带有图片的按钮，该图片将显示在按钮的内部和外部，如下所示：

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

我正在使用 ASP.NET 和 C#

谢谢

Answer 1

我听从了marmite的建议，解决了这个问题。 ASP 的按钮可能不喜欢 :before 所以我将它包含在一个带有 css 类 bon 的 div 中，并对其进行适当的样式设置以获得我想要的结果。

页面.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 position: relative 然后你可以绝对定位伪元素内部，以便它弹出顶部。

然后向按钮添加左填充，这样文本就不会位于图像下方。

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;
}