欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

css水波按钮特效

程序员文章站 2022-04-06 12:45:13
...
css水波按钮特效，免费提供源码，对css有兴趣的同学可以去研究研究哈~这对我们的css技术又是一种提升

css水波按钮特效

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP中文网</title>
        <style>
             a{
                text-decoration:none;
                user-select:none;
                position: relative;
                display: block;
                margin: 100px auto;
                width:120px;
                height:50px;
                line-height:50px;
                text-align:center;
                border-radius:25px;
                color:#fff;
                font-size:16px;
                cursor:pointer;
                background-color: #ff8300;
                box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
                overflow: hidden;
            }

             a:after{
                position: absolute;
                content: "";
                display: block;
                margin: auto;
                left: -40px;
                top:-75px;
                width: 200px;
                height: 200px;
                background: #ff8300;
                border-radius: 50%;
                opacity: 0;
                transition: all 0.8s;
            }
             a:hover{
                 background-color: #FF9D00;
                 top:-2px;
                 box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
            }
             a:active{
                 background-color: #ff8300;
                 top:0;
                 box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
            }
             a:active:after{
                width: 0;
                height: 0;
                left:60px;
                top: 25px;
                opacity: 1;
                transition-duration: 0s;
            }
        </style>
    </head>
    <body>
            <a href="javascript:void(0)">PHP中文网</a>
    </body>
</html>

以上就是全部的css水波按钮特效，更多关于css的文章请到PHP中文网搜索

相关推荐：

css鼠标悬停动画

css波纹动画

css，js骰子抽奖源码

以上就是css水波按钮特效的详细内容，更多请关注其它相关文章！

相关标签： 样式表 css 特效

上一篇： 几个好用的css函数小技巧

下一篇： IIS解析json配置使用详解

推荐阅读