zoukankan      html  css  js  c++  java
  • 边框、背景渐变的按钮效果

    这两天遇到了个按钮效果,要求背景、边框做颜色渐变,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下啊

  • 相关阅读:
    [C#/.NET]Entity Framework(EF) Code First 多对多关系的实体增,删,改,查操作全程详细示例
    玩转Asp.net MVC 的八个扩展点
    float实例讲解
    C#高性能TCP服务的多种实现方式
    如何把SQLServer数据库从高版本降级到低版本?
    ASP.NET MVC Area使用-将Area设置成独立项目
    如何使用ping和tracert命令测试网站访问速度
    ASP.NET MVC 入门10、Action Filter 与 内置的Filter实现(实例-防盗链)
    MVC Action Filter
    c#中单元测试
  • 原文地址:https://www.cnblogs.com/ycx0317/p/5725383.html
Copyright © 2011-2022 走看看