<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3练习 -3D按钮</title> </head> <body> <a class="btn" href="javascript:;">this is demo</a> </body> </html>
*{margin:0;padding: 0;} a{text-decoration: none;} body{text-align:center;} .btn{ font-family: 'Segoe Print'; font-size:50px; color:#FFF; padding:20px 70px; line-height:50px; margin-top:200px; display: inline-block; background: -webkit-linear-gradient(top,#f78ab4,#ef5991); text-shadow:0 -2px rgba(0,0,0,0.2); border-radius:8px; box-shadow: 0 8px 0 #c5376d, 0 10px 10px rgba(0, 0, 0,.35); transition:0.2s; } .btn:active{ box-shadow: 0 4px 0 #c5376d, 0 4px 10px rgba(0, 0, 0,.35); transform:translate(0, 4px) }