css 样式按钮

Question

我想让我的按钮响应，所以我不能将图像与背景一起使用。我只能使用购物车的第二张图片，但是如何设置它的样式，所以它的一部分留在外面？

Answer 1

您正在寻找这样的东西吗？

jsFiddle: http://jsfiddle.net/vgayjg9j/2/

编辑：更新了 jsFiddle。它现在突出了。

<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>

button {
    width: 120px;
    height: 40px;
}
button img {
    height: 100%;
    float:left;
}

Answer 2

根据你的问题，我想如果是在较小的设备上，你想要按钮来填满屏幕？

媒体查询是您应该开始的地方。

还要确保使用 % 作为按钮的宽度，例如，如果您希望按钮填满屏幕，css 将如下所示：

button {
  width: 100%;
}

如果图像不应该改变，那么我将以像素为单位定义图像的宽度：

button img {
  width: 40px;
}

Answer 3

您可以将 background-image 应用于 button 元素的 :pseudo-element 并使用 top 和 left 属性定位它们。

button {
  position: relative;
  width: 20%;
  height: 35px;
  background: #B7004A;
  border: none;
  border-radius: 5px;
}
button:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 110%;
  top: -7px;
  left: -3px;
  background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
  background-size: auto 105%;
}

<button></button>

css 样式按钮

css for styling button

css

button