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

原创 2018年04月17日 15:25:59

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

效果图如下:

 未点击状态

点击首页时的状态

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

猫商城首页楼层效果

-
  • 1970年01月01日 08:00

CSS设置按钮式超链接

CSS设置按钮式超链接           网页上有很多超链接都是按钮的形式,这些都使用了各种图片,这里通过CSS普通的属性实现按钮的效果。           首先,建立最简单的HTML页面,代...
  • nangeali
  • nangeali
  • 2016-11-20 19:34:29
  • 1030

html中怎么把按钮做成超链接效果

test
  • haozhongjun
  • haozhongjun
  • 2012-09-06 13:17:45
  • 5463

css按钮效果(按下效果)

1.div内容:登录 2.css样式: .shit{ width:70px; height:25px; float:right; border-radius:4px; borde...
  • u013641234
  • u013641234
  • 2014-11-29 19:37:24
  • 46371

bootstrap 超链接变按钮

xuhaitao 上面代码效果如下: btn btn-default :变成一个按钮样子 btn-lg : 大号的按钮 btn-block : 按钮填充整个宽度FR:海涛高软 (Q...
  • qq_15267341
  • qq_15267341
  • 2016-09-25 11:53:00
  • 2911

给按钮添加超链接

有的时候已经组织好按钮的样式了,却发现标签比button更方便添加页面跳转,但是又不想更换组件,毕竟样式已经写好了,于是找到如下链接添加方式: 1.如果让本页转向新的页面则用: 2.如果需要打开一个...
  • m0_37828249
  • m0_37828249
  • 2017-09-16 18:10:48
  • 310

点击超链接,选中对应的单选按钮

单选按钮太小不好选中,有时候需求让我们点击
  • w666666666
  • w666666666
  • 2014-06-27 10:05:36
  • 1060

vue简易指引用户向下翻阅悬浮效果箭头实现

在组件mounted阶段,给屏幕添加屏幕滚动监听事件: mounted: function () {       window.addEventListener('scroll', this.menu...
  • theoneEmperor
  • theoneEmperor
  • 2017-09-20 19:57:11
  • 856

在jsp中怎么把按钮做成一个超链接

№   (在当前页面打开reg.jsp)  №   (在当前页面打开reg.jsp)  №   (在新的页面打开reg.jsp)  №                              ...
  • JamesLi6
  • JamesLi6
  • 2016-08-10 17:54:38
  • 6395

实现超链接风格的按钮

  • 2010年06月16日 19:28
  • 46KB
  • 下载
收藏助手
不良信息举报
您举报文章:设置超链接的按钮效果(向下按)
举报原因:
原因补充:

(最多只允许输入30个字)