用css制作票按钮[关闭]答案

【问题标题】：Make ticket button with css [closed]用css制作票按钮[关闭]
【发布时间】：2016-07-14 23:00:20
【问题描述】：

我有设计，客户只想用 CSS 制作按钮

我找到了一些方法来做到这一点，但并不相同。而且我无法改进到完美的副本。

【问题讨论】：

你累了什么？
发布您尝试过的任何内容。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： html css background background-image

【解决方案1】：

您可以使用伪元素并从它们的阴影中绘制背景，example：

a {
  margin:3em;
  font-family:arial;
  text-decoration:none;
  position:relative;
  display:inline-block;
  padding:1.5em 5em;
  text-transform:uppercase;  
  overflow:hidden;
  color:white;
  border:3px solid white;
  border-left:none;
  border-right:none;
  background:linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) top left no-repeat,linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) bottom left no-repeat;
  background-size:100% 1.45em;
}

a:before,a:after {
  z-index:-1;
  content:'';
  position:absolute;
  height:1.2em;
  width:1em;
  top:1.4em;
  border-radius:50%;
  border:3px solid white;
  box-shadow:0 0 0 10em #102229;
}
a:before {
  left:-0.7em;
}a:after {
  right:-0.7em;
}
b:after {
  content:'>';
  color:#DA153E;
  font-weight:bold;  
  }
body {
  background:url(http://lorempixel.com/600/300);
}

&lt;a href="#"&gt; &lt;b&gt;get a free quote &lt;/b&gt;&lt;/a&gt;

【讨论】：

伙计，非常感谢！你只是节省了很多时间，因为我玩了半天的线性渐变......再次感谢！