效果图
hover-style
code:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="author" content="RCX-CN"/> 6 <title></title> 7 <style> 8 *{padding: 0px;margin: 0px;} 9 #box{ 10 width: 100px; 11 margin: 50px auto; 12 } 13 a{ 14 padding: 5px 8px; 15 text-decoration: none; 16 color: #00BFFF; 17 letter-spacing: 1.5px; 18 border-radius: 10px; 19 box-shadow: 1.2px 1.2px 5px -3px rgba(0,0,0,0.6),-0.1px -0.1px 5px -3px rgba(0,0,0,0.1); 20 } 21 a:hover{ 22 box-shadow: inset 1.2px 1.2px 5px -3px rgba(0,0,0,0.4); 23 text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.2); 24 } 25 </style> 26 </head> 27 <body> 28 <div id="box"> 29 <a href="#"> 30 <span>Click</span> 31 </a> 32 </div> 33 </body> 34 </html>