需要CSS3按钮样式

Question

好的，我已经完成了重新创建此按钮的任务

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

使用HTML的这一部分

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

我需要帮助我迷失在渐变上，部分应该是盒子阴影还是嵌入边框等。请你解释一下答案

Answer 1

以下是渐变部分的建议。您需要自己添加图标。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;