按钮风格1
<div class="button1"> <span>立即下载</span> </div> <style> .button1 { width: 200px; height: 46px; line-height: 46px; background: #2e82ff; color: #ffffff; font-size: 18px; border-radius: 27px; animation: zoomIn 1.5s infinite; /* */ text-align: center; } @keyframes zoomIn { 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style>
立即下载
按钮2
<div class="btn">Button Hover <div class="btn2"> </div> </div> <style> body { //这段代码,将按钮置于中间,可删除 align-items: center; background: #ffffff; display: flex; width: 100vw; height: 100vh; font-family: sans-serif; justify-content: center; } .btn, .btn2 { color: rgba(255,255,255,0.9); border-radius: 50px; width: 300px; height: 100px; font-size: 30px; text-align: center; line-height: 100px; background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5); background-size: 600%; -webkit-animation: anime 6s linear infinite; animation: anime 6s linear infinite; } .btn2 { position: absolute; margin-top: -70px; z-index: -1; filter: blur(30px); opacity: 0.8; } @keyframes anime { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-webkit-keyframes anime { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style>
Button Hover
rewwg
标签:多种,100%,50%,height,风格,background,按钮,position,0% From: https://www.cnblogs.com/stevioside/p/17175887.html