a标签圆角按钮CSS样式并添加阴影效果

a标签定义一个圆角按钮并添加阴影效果该怎么添加CSS样式呢？

/*html代码*/
<a class="btn-buy">去淘宝下单</a>

/*对应的css代码*/
<style> 
.btn-buy:hover{text-decoration: none;color:white;background-color:#FF2463}
.btn-buy {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5);
    -moz-box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5);
    box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5);
    background: #F55B47;
    color: #FFF;
    padding: 5px 15px;   
}
</style>

查看运行效果

a标签圆角按钮运行效果：

鼠标移动到按钮之后的效果：

代码分析：

类似-webkit 与-moz 这种类型的定义是做谷歌，IE与火狐这三个浏览器的兼容。

box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5);属性定义了a标签圆角按钮的阴影效果，四个参数分别为：向右边3px，向下边px，直径3px，阴影颜色为rgb内定义的颜色。

border-radius: 4px; 表示按钮角度直径为4px。

padding: 5px 15px; 表示内容内间距上下为5px，左右为15px。

color表示a标签文字颜色为定义的颜色

background：定义了a标签的背景颜色