zoukankan html css js c++ java

CSS水纹按钮实例

<!DOCTYPE html>

<html>
<head><title>水纹按钮实例</title></head>
<style type="text/css">
     /* 按钮反馈之波纹 */
    .ripple {
        position: relative;
        /* overflow:hidden */  /*打开注释及效果不扩散在外*/
    }
    .ripple:focus{
        outline: none;
    }

    .ripple:after {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        pointer-events: none;
        background-color: #888;
        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;
    }
/* 按钮反馈之波纹 */
</style>

<body>
<button class="ripple">我是水纹按钮</button>
</body>
</html>

本文作者：Love In Winter

本文链接：https://www.cnblogs.com/LifeDecidesHappiness/p/15683606.html

声援博主：如果您觉得文章对您有帮助，可以扫一扫，任意打赏，您的鼓励是博主的最大动力！

查看全文

相关阅读:
csp-2020-s游记
 线性DP
tarjan无向图
 tarjan有向图
 树前置知识普及
 hash
可持久化线段树&主席树
 [HAOI 2015] 树上染色
 [Contest on 2020.11.24] Beetle
[Contest on 2020.11.24] Candy

原文地址：https://www.cnblogs.com/LifeDecidesHappiness/p/15683606.html