您当前的位置：首页>HTML&CSS>如何实现按钮波纹点击特效 网站首页HTML&CSS

如何实现按钮波纹点击特效

发布时间：September 20, 2018 编辑：晓宇 阅读：(1568)

有时候我们会为按钮添加点击波纹特效提升用户体检，我们使用CSS就可简单实现。主要借助::after伪类及CSS3中的transform和transition属性。

HTML页面：

<div class="container text-center">

        <button class="btn btn-default ripple btn-lg">Button</button>

        <button class="btn btn-default ripple btn-lg">Button with very long content</button>

</div>

CSS样式

.ripple {

    position: relative;

    //隐藏溢出的径向渐变背景

    overflow: hidden;

}

.ripple:after {

    content: "";

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

    //设置径向渐变

    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);

    background-repeat: no-repeat;

    background-position: 50%;

    transform: scale(10, 10);

    opacity: 0;

    transition: transform .3s, opacity .5s;

}

.ripple:active:after {

    transform: scale(0, 0);

    opacity: .3;

    //设置初始状态

    transition: 0s;

}

效果如下：






阿里的Ant Design按钮风格也可以以这个为模板来实现：

.ripple {

    position: relative;

    //此处不需要设置overflow:hidden,因为after元素需要溢出显示

}

.ripple:focus{

    outline: none;

}

.ripple:after {

    content: "";

    display: block;

    position: absolute;

    //扩大伪类元素4个方向各10px

    top: -10px;

    left: -10px;

    right: -10px;

    bottom: -10px;

    pointer-events: none;

    background-color: #333;

    background-repeat: no-repeat;

    background-position: 50%;

    opacity: 0;

    transition: all .3s;

}

.ripple:active:after {

    opacity: .3;

    //设置初始状态

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    transition: 0s;

}

效果如下：

• 转载请注明： 如何实现按钮波纹点击特效_晓宇个人博客
• 版权声明： 如未注明出处,均为本站原创文章，由 晓宇 发表在 HTML&CSS 分类下