需要 CSS3 按钮样式

【问题标题】：Need CSS3 Button Styling需要 CSS3 按钮样式
【发布时间】：2017-04-21 13:03:42
【问题描述】：

好的，我被赋予了重新创建此按钮的任务

https://s27.postimg.org/7e1upkf4j/BUTTONS.png

使用这部分 HTML

<a href="#">
  Home <i class="material-icons ico-style">home</i>
</a>

我需要帮助，我对渐变以及部分是否应该是框阴影或嵌入边框等感到迷茫。请你解释一下答案

【问题讨论】：

您能告诉我答案中缺少什么吗？以便我调整并接受。

标签： html css button stylesheet styling

【解决方案1】：

这里是渐变部分的建议。图标你需要自己添加。

a {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  border: 1px solid lightgray;
  background: linear-gradient(#999,#fff);
  text-decoration: none;
}

a::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 9px;
  width: 100px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid gray;
  background: white;
}

a span {
  position: relative;
}

<a href="#">
  <span>Home <i class="material-icons ico-style"></i></span>
</a>

【讨论】：