客户想要跟随CSS按钮

Question

在为按钮创建以下CSS样式时，我需要帮助，不知道如何添加不同背景，并在它们之间留有间距。

http://i64.tinypic.com/df9936.jpg

Answer 1

您可以使用CSS线性渐变来做到这一点。参见下面的示例。

button {
  padding: 20px 40px;
  font-size: 16px;
  color: #FFF;
  padding-left: 10px;
  border:none;
  background: linear-gradient(to right, rgba(255,38,0,1) 0%, rgba(246,41,12,1) 74%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 77%, rgba(255,111,0,1) 78%, rgba(255,111,0,1) 87%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 89%, rgba(247,255,0,1) 93%, rgba(247,255,0,1) 100%);
}
button:focus {
  outline:none;
}

<button>Explore</button>

Answer 2

下载下面的图像并将其命名为button-1，然后使用下面的html。该图像将成为链接，您无需使用空白空间。

<a href="http:www.google.com">
  <img src="button-1.jpg" alt="imagelink" style="width:42px;height:42px;border:0;">
</a>