css案例学习之按钮超链接

最新推荐文章于 2022-05-25 17:42:31 发布

weixin_34198453

最新推荐文章于 2022-05-25 17:42:31 发布

阅读量166

点赞数

效果

css实现

<html>
<head>
<title>按钮超链接</title>
<style>


a{                                        /* 统一设置所有样式 */
    font-family: Arial;
    font-size: .8em;
    text-align:center;
    margin:3px;
}
a:link, a:visited{                        /* 超链接正常状态、被访问过的样式 */
    color: #A62020;
    padding:4px 10px 4px 10px;
    background-color: #ecd8db;
    text-decoration: none;
    border-top: 1px solid #EEEEEE;        /* 边框实现阴影效果 */
    border-left: 1px solid #EEEEEE;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
}
a:hover{                                    /* 鼠标经过时的超链接 */
    color:#821818;                        /* 改变文字颜色 */
    padding:5px 8px 3px 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>
</head>
<body>
       <a href="#"> Home </a> 
       <a href="#"> Contact Us</a>
       <a href="#"> Web Dev</a> 
       <a href="#"> Web Design</a> 
       <a href="#"> Map </a>
</body>
</html>

weixin_34198453

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css案例学习之按钮超链接

效果 css实现&lt;html&gt;&lt;head&gt;&lt;title&gt;按钮超链接&lt;/title&gt;&lt;style&gt;a{ /* 统一设置所有样式 */ font-family: Arial; font-size: ....
复制链接

扫一扫