设置超链接的按钮效果(向下按)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35768238/article/details/79974949

      设置超链接像按钮一样,并且当鼠标移到一个超链接上是,会有向下按的凹陷效果。通常是利用a:hover,将链接向下、向右各移动一个像素即可。

<body>
    <a href="#">首页</a>
    <a href="#">团购</a>
    <a href="#">女装</a>
    <a href="#">男装</a>

  <style type="text/css">
      a{font-family:"幼圆";font-size:2em;text-align:center;margin:5px;color:#000}
      a:link,a:visited{color:#ac2300; text-decoration:none; padding:4px 10px; background-color:#ccd8db; border-top:1px solid #eeeeee;
    border-left:1px solid #eeeeee;border-bottom:1px solid #717171;border-right:1px solid #717171;}
      a:hover{color:#821818; text-decoration:underline;padding:5px 12px 5px 12px; background-color:#e2c4c9; border-top:1px solid #717171;
    border-left:1px solid #717171;border-bottom:1px solid #eeeeee;border-right:1px solid #eeeeee;}
  </style>
</body>

效果图如下:

 未点击状态

点击首页时的状态

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页