桃子海滩风格按钮特效（可复制源代码）
## 效果演示
##### 源代码
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>桃子海滩</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:500");body{background:#ffecd9;display:grid;height:100vh;margin:0;place-items:center;padding:1rem}button{-webkit-appearance:none;background:-webkit-gradient(to right,#a2ccb6 0%,#fceeb5 50%,#ee786e 100%);background:linear-gradient(to right,#a2ccb6 0%,#fceeb5 50%,#ee786e 100%);background-size:500%;border:none;border-radius:5rem;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15);color:#fff;cursor:pointer;font:1.5em Raleway,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:5rem;letter-spacing:0.05em;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:20rem}button:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}
</style>
</head>
<body>
<button>Beach Time 🌴</button>
</body>
</html>
```
页:
[1]