效果比较简单
这个案例是在别人基础上改的, 主要理解思路, 对伪元素伪类有一个更好的理解
这是第一个案例
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 水波按钮最终版 </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)">buttonA</a>
- </body>
- </html>
这是第二个案例, 我加了一个状态
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>IE 嵌套点击问题测试 </title>
- <style>
- .btn{
- margin: 100px auto;
- cursor:pointer;
- font-size: 16px;
- display: block;
- height: 50px;
- border-radius: 25px;
- border: none;
- outline: none;
- background-color: #ff8300;
- box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
- color: #fff;
- width: 120px;
- position: relative;
- overflow: hidden;
- }
- span{
- display: inline;
- position: relative;
- z-index: 1;
- }
- .btn:hover{
- box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
- top:-2px;
- }
- .btn:active{
- box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
- color: #ffca8c;
- background-color: #f07b00;
- top:0;
- }
- .btn:after{
- position: absolute;
- content: "";
- display: block;
- margin: auto;
- width: 0;
- height: 0;
- left:60px;
- top: 25px;
- background: rgba(255, 157, 0, 1);
- border-radius: 50%;
- opacity: 0;
- transition: all 0.5s;
- }
- .btn:hover:after{
- left: -40px;
- top:-75px;
- width: 200px;
- height: 200px;
- opacity: 1;
- transition-duration: 0.5s;
- }
- .btn:active:after{
- width: 0;
- height: 0;
- left:60px;
- top: 25px;
- opacity: 1;
- transition-duration: 0s;
- }
- </style>
- </head>
- <body>
- <button type="button" class="btn">
- <span>buttonB</span>
- </button>
- </body>
- </html>
来源: http://www.qdfuns.com/article/46502/8372767059f9fbf2a521cc53e1b40d7a.html