[分享]css3按钮效果代码

CSS3按钮效果是Web设计师和开发人员的一种重要技术，通过它可以为网站添加美观的按钮效果，从而增强用户体验。本文将为大家介绍几种常用的CSS3按钮效果代码。 第一种效果是渐变按钮，其代码如下： .b...

CSS3按钮效果是Web设计师和开发人员的一种重要技术，通过它可以为网站添加美观的按钮效果，从而增强用户体验。本文将为大家介绍几种常用的CSS3按钮效果代码。
第一种效果是渐变按钮，其代码如下：

.btn-gradient{
    background-color: #38AADD; /* fallback */
    background-image: linear-gradient(to bottom, #38AADD 0%, #297EAD 100%);
    background-repeat: repeat-x;
<br>
    border-color: #297EAD;
    color: #FFFFFF;
<br>
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
} 

第二种效果是圆角按钮，其代码如下：

.btn-rounded{
    border-radius: 25px;
    border: 2px solid #3b3b3b;
    background-color: #d3d3d3;
    font-size: 20px;
    padding: 10px 20px;
    color: #3b3b3b;
} 

第三种效果是图标按钮，其代码如下：

.btn-icon{
    display: inline-block;
    padding: 10px 20px;
    background: url(../img/icon.png) no-repeat center center;
    background-size: 20px 20px;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    text-decoration: none;
} 

以上就是三种常用的CSS3按钮效果代码，可以根据自己的需求相应地进行修改。同时，需要注意的是，CSS3按钮效果需要浏览器的支持，因此在使用时需要进行浏览器兼容性测试。