豪华按钮 – 有爱前端

http://codepen.io/dbox/pen/bdzeEw/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>豪华按钮</title> <style type="text/css"> .btn { display: inline-block; background: transparent; text-transform: uppercase; font-weight: normal; font-style: normal; font-size: 0.625rem; letter-spacing: 0.3em; color: rgba(223,190,106,0.7); border-radius: 0; padding: 18px 80px 20px; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; background: -webkit-linear-gradient(180deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0)); background: -webkit-linear-gradient(right, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0)); background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0)); background-position: 1% 50%; background-size: 300% 300%; text-decoration: none; margin: 0.625rem; border: none; border: 1px solid rgba(223,190,106,0.3); } .btn:hover { color: #fff; border: 1px solid rgba(223,190,106,0); color: $white; background-position: 99% 50%; } body { background: #231f20; color: #fff; font-family: "Helvetica Neue", Helvetica, Arials, sans; } article { height: 100vh; } div.center { text-align: center; width: auto; max-width: 800px; float: none; display: block; margin-right: auto; margin-left: auto; padding-left: 0; padding-right: 0; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } div.center::after { content: ''; display: table; clear: both; } </style> </head> <body> <article> <div class="center"> <a class="btn" href="#">individuals</a> <a class="btn" href="#">brokers </a> </div> </article> </body>  </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 豪华按钮