[聚合文章] 一个有质感的CSS3按钮需要用到阴影、内阴影、线性渐变

我们要做的这个CSS3按钮的有以下几个点

• 按钮的深色边框
• 紧邻按钮上边框有一条亮条且都有圆角
• 边框下部有少许阴影
• 实际上这个按钮的背景色从上到下有一个渐变，不是很明显，但看起来确实舒服

按钮讲解

• 在这里我用的是a链接，在css里面，对这个a只写了去除下划线，其他的我们放另一个名为btn的css类里面
• 在.btn里面设置了让这个a变为display: inline-block;，然后给其设置固定的宽度width: 60px;和高度height: 30px;以及文字颜色color: #FFF;居中text-align: center;和行高垂直居中line-height: 30px;设置了边框颜色和圆角
• 、、、、、、、重点、、、、、、、、
• 为了让这个按钮更有质感，这里用的background是线性渐变，background-image: linear-gradient(#00B3F1, #00A3EF);由浅到深
• 在.btn的css里写的阴影那一段代码里面写了两个阴影，用逗号隔开，第一个阴影是我们这个按钮边框下边的一点点阴影，用阴影的时候建议使用rgba来写，rgba的第四个参数是透明度，用透明度控制阴影在调整时是比较方便的，第二个阴影是内阴影，多了一个inset参数，这个阴影是在这个按钮内部紧邻边框出现的，在图里我们可以看到这个内阴影形成了一个亮条让按钮看起来更有质感，用内阴影的好处是边框给圆角的同时这个内阴影亮条也受到了影响，更加的合理和方便，用span来替代这个亮条的话在这里圆角处理会很麻烦。

<a class="btn" href="#">平安夜</a>


.btn {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    width: 60px;
    height: 30px;
    color: #FFF;
    background-image: linear-gradient(#00B3F1, #00A3EF);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(255, 255, 255, .4);
    border: solid 1px #0082BE;
    border-radius: 2px;
}


a {
    font-family: "Microsoft Yahei";
    text-decoration: none;
}

祝大家平安夜快乐