CSS设置按钮式超链接

最新推荐文章于 2021-05-31 10:59:56 发布

量变决定质变

最新推荐文章于 2021-05-31 10:59:56 发布

阅读量6.7k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/53243505

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

CSS设置按钮式超链接

网页上有很多超链接都是按钮的形式，这些都使用了各种图片，这里通过CSS普通的属性实现按钮的效果。

首先，建立最简单的HTML页面，代码如下：

<table width="600px"cellpadding="2" class="chara1" align="center">
                     <tr>
                            <td><ahref="#">首页</a></td>
                            <td><ahref="#">心情日记</a></td>
                            <td><ahref="#">学习心得</a></td>
                            <td><ahref="#">工作笔记</a></td>
                            <td><ahref="#">生活琐碎</a></td>
                            <td><ahref="#">其他</a></td>
                     </tr>   
              </table>

然后，CSS对<a>标记整体控制，加入CSS的3个伪属性，对于普通超链接和点击过的超链接采用同样的样式，并且，利用边框的样式模拟按钮的效果。

鼠标经过时，改变文字的颜色，背景色、位置和边框等等，从而，模拟按钮按下去的效果。

<html>
       <head>
              <title>
                    
              </title>
              <style>
                     <!--
                     a{
                     font-family:Arial;
                     font-size:.8em;
                     text-align:center;
                     margin:3px;
              }
                     a:link,a:visited{
                     color:#a62020;
                     padding:4px10px 4px 10px;
                     background-color:#ecd8db;
                     text-decoration:none;
                     border-top:1pxsolid #eeeeee;
                     border-left:1pxsolid #eeeeee;
                     border-bottom:1pxsolid #717171;
                     border-right:1pxsolid #717171;
              }
                     a:hover{
                     color:#821818;
                     padding:5px8px 3px 12px;
                     background-color:#e2c4c9;
                     border-top:1pxsolid #717171;
                     border-left:1pxsolid #717171;
                     border-bottom:1pxsolid #eeeeee;
                     border-right:1pxsolid #eeeeee;
              }
                     -->
              </style>
       </head>
      
       <body>
              <tablewidth="600px" cellpadding="2" class="chara1"align="center">
                     <tr>
                            <td><ahref="#">首页</a></td>
                            <td><ahref="#">心情日记</a></td>
                            <td><ahref="#">学习心得</a></td>
                            <td><ahref="#">工作笔记</a></td>
                            <td><ahref="#">生活琐碎</a></td>
                            <td><ahref="#">其他</a></td>
                     </tr>   
              </table>
       </body>
</html>

通过对3个伪属性的颜色、背景色和边框的修改，模拟了按钮的效果。