| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title></title>
|
| </head>
|
| <body>
|
| |
| <a href="#">
|
| |
| <span>Buttom</span>
|
| <div class="wave"></div>
|
| |
| </a>
|
| |
| </body>
|
| </html>
|
| |
| |
| <style type="text/css">
|
| |
| *{
|
| margin: 0px;
|
| padding: 0px;
|
| box-sizing: border-box;
|
| font-family: arial;
|
| }
|
| |
| body{
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| min-height: 100vh;
|
| }
|
| |
| a{ position: relative; display: block; padding: 10px 30px;border: 2px solid #00aeff;text-transform: uppercase; font-size: 18px;
|
| letter-spacing: 4px; color: #00aeff; text-decoration: none; overflow:hidden;}
|
| a span{ position: relative; z-index: 1; transition: 1s;}
|
| a:hover span{color: #fff;}
|
| a .wave{position: absolute; top: calc(100% + 22px); left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, #0943a4, #1fa7f4); transition: 1s;}
|
| a:hover .wave{top: 0px;}
|
| a .wave:before{ content: ''; position: absolute; top: -22px; left: 0px; height: 22px; background: url(wave.png); width: 100%;
|
| animation: animate 0.5s linear infinite;}
|
| @keyframes animate
|
| {0%{background-position-x:0px; background-position-y:-22px;}
|
| 100%{background-position-x:118px; background-position-y:-22px;}
|
| }
|
| </style> |
Comments
Post a Comment