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

您可以将background-image应用于button元素的：pseudo元素，并使用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>

Answer 3

根据您的问题，我认为如果它位于较小的设备上，您想要按钮填充屏幕？

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

另外请确保使用％作为按钮的宽度，例如，如果您希望按钮填充屏幕，则css看起来像这样：

button {
  width: 100%;
}

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

button img {
  width: 40px;
}