按钮拟态效果

Posted on 2020-07-08 09:46  RorinL  阅读(270)  评论(0)  编辑  收藏  举报

效果图

 

 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>

 

我的个人网站https://www.rfbynet.club