这两天遇到了个按钮效果，要求背景、边框做颜色渐变，hover状态时还需要有弥散投影的效果（设计稿中弥散投影也有渐变），因为是统一样式，希望能够用起来简便，做起来着实费了点劲（尤其是那个边框渐变），效果如图：
1 .btn-current{display: inline-block;font-size: 12px;color: #699ffa;padding: 1px 30px; vertical-align: middle;text-align: center; position: absolute;border-radius: 2px;z-index: 10;cursor: pointer;background: -webkit-linear-gradient(left, #77aaff, #7fc7ff);background: -o-linear-gradient(left, #77aaff, #7fc7ff);background: linear-gradient(to right, #77aaff, #7fc7ff);} 2 .btn-current:hover, .btn-current.active{color: #fff;} 3 .btn-current:hover:before{content: '';display: inline-block;height: 14px;position: absolute;bottom: -5px;left: 6px;right: 6px;z-index: -1;-webkit-filter: blur(5px) brightness(0.88);filter: blur(20px) brightness(0.95);background: -webkit-linear-gradient(left,#77aaff,#7fc7ff);background: -moz-linear-gradient(left,#77aaff,#7fc7ff);background: linear-gradient(to right, #77aaff, #7fc7ff);} 4 .btn-current:after{content: '';display: inline-block;position: absolute;left: 2px;top: 2px;height: calc(100% - 4px);width: calc(100% - 4px);background: #fff;z-index: -1;} 5 .btn-current:hover:after, .btn-current.active:after{width: 100%;height: 100%;top: 0;left: 0;border-radius: 2px;background: -webkit-linear-gradient(left, #77aaff, #7fc7ff);background: -o-linear-gradient(left, #77aaff, #7fc7ff);background: linear-gradient(to right, #77aaff, #7fc7ff);} 6 .btn-current-disabled{display: inline-block;color: rgba(0, 0, 0, 0.26);border: 2px solid #bdbdbd;padding: 0px 30px;font-size: 12px;border-radius: 2px;cursor: no-drop;}
<span class="btn-current">导入</span> <span class="btn-current active">导入</span> <span class="btn-current-disabled">导入</span>
抛砖引玉，有更好的方法的，还请大家share下啊