设置超链接的按钮效果（向下按）

最新推荐文章于 2022-10-13 11:11:24 发布

对着阳光微笑

最新推荐文章于 2022-10-13 11:11:24 发布

阅读量1.4k

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/qq_35768238/article/details/79974949

版权

html5+css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

设置超链接像按钮一样，并且当鼠标移到一个超链接上是，会有向下按的凹陷效果。通常是利用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>

效果图如下：

未点击状态