<a href="#" class="btn">Start eating well</a>
显示如下:
<a>
元素的伪类顺序依次写为 :link, :visited, :hover, :active
.btn:link, .btn:visited {
font-size: 20px;
font-weight: 600;
background-color: #e67e22;
color: #fff;
text-decoration: none;
/* button 必须先设 display 属性 */
/* padding 默认对 inline 元素不起作用 */
display: inline-block;
/* right, left 一般设为 top bottom 的两倍 */
padding: 16px 32px;
border-radius: 9px;
}
.btn:hover, .btn:active {
/* 背景色改为相对浅的颜色 */
background-color: #ffa94d;
}