本文首次发布于 Byron Han Blog, 作者 @han(Byron Han) ,转载请保留原文链接.
1、按钮HTML
在页面中可能会有按钮的出现，甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢?
接下来这个就是最简单的一个按钮
事实上，在Web网站或应用程序中近99.9%的可点击内容都是<a>或<button>元素。如果你不确定在给定的情况下应该使用什么元素的话，可以参考下面的建议：
如果需要跳转到新的页面或更改页面的大部分内容，建议使用
<a>元素 否则，更建议使用button元素（或者<input type="button">）
为什么要这么用呢？主要是出于HTML的语义化做考量，而且这样做更有利于SEO。除此之外也能更好的配合键盘做相应的操作，更利于提高用户的可访问性。尽管如此，开发人员很少使用<button>元素。特别是在移动端的开发中，更多的开发人员更喜欢使用<div>、<span>或<a>这样的元素。
为什么会有这方面的现象呢？主要是因为：<button>元素带有复杂的默认样式（特别是在不同的浏览器中略有不同），这样一来也增加了样式难于维护。幸运的是，我们可以自己重置<button>的样式，让所有客户端初始的样式更趋于统一，也更利用按钮样式的美化：
下面是按钮的HTML
1
2
3
4
5
6
<div class="mobile_btn_group">
<a href="//" style="margin-right:1rem">
<button>BYRON HAN</button></a>
<a href="///" style="margin-left: 1rem">
<button>CSS 按钮</button></a>
</div>
2、按钮CSS
现在我们设置<button>元素在各客户端下的样式，让他们都趋于统一。但按钮毕竟是按钮，和文本是不一样的（样式上看上去应该是不一样的），因此我们就需要给其添加自己定义样式（根据你的需求来添加）。比如下面这样的示例代码：
可以自己调整大小样式,毕竟我一个后端都能调👅
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.mobile_btn_group {
text-align: center;
}
a {
margin-right: 1rem;
}
.mobile_btn_group a {
display: inline-block;
width: 12rem;
height: 2.5rem;
background: -webkit-gradient(linear,left top, right top,from(#02fdfe),to(#d3fb42));
background: -webkit-linear-gradient(left,#02fdfe,#d3fb42);
background: -o-linear-gradient(left,#02fdfe,#d3fb42);
background: linear-gradient(to right,#02fdfe,#d3fb42);
border-radius: 3rem;
margin: 2rem auto;
padding: 2px;
text-decoration: none;
}
.mobile_btn_group a button {
margin: auto;
width: 12rem;
display: block;
height: 2.5rem;
border-radius: 3rem;
background: #fff;
font-size: 1.3rem;
color: #666666;
}
