css按钮悬停效果
纯css按钮悬停动光影画效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css按钮悬停效果</title> <style type="text/css"> body { background: #b9ecc5; } a.button { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #23252f; text-decoration: none; padding: 20px 45px; border-radius: 9px; background: #64ed85; box-shadow: 3px 3px 6px #296137, -3px -3px 6px #9fffd3; transition: all .3s; background-repeat: no-repeat; background-position: -135px -135px, 0 0; background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50%); background-size: 250% 250%, 100% 100%; transition: background-position 0s ease; } a.button:active { border-radius: 25px; border-radius: 9px; background: #64ed85; box-shadow: inset 3px 3px 6px #296137, inset -3px -3px 6px #9fffd3; } a.button:hover { transform: translate(-50%, -50%) scale(1.03); background-position: 0 0, 0 0; transition-duration: 0.9s; } </style> </head> <body> <a href="#" class="button">Button</a> </body> </html>
版权声明:本文由 LzxBlog 发布,如需转载请注明出处。