立体感很强的纯CSS按钮式超链接

　　此篇文章没有什么技术性的难点，属于灰常平庸的那种，但是有感于作者控制立体感的能力，表示比较佩服，所以誊录在此，以备查阅反省。

　　首先看效果图：

　　 

　　产生这种效果并无难度，可让我把配色和凹陷的字体位置把握的与现实神似，我表示做不到这层。 

　　不多说了，上代码：　　 

<style type="text/css">
a{
    font-family:Arial;
    font-size:.8em;
    text-align:center;
    margin:3px;
}
a:link,a:visited{
    color:#A62020;
    padding:4px 10px;　　/*鼠标放上前字体位置*/
    background-color:#ecd8db;
    text-decoration:none;
    border-top:1px solid #EEE;
    border-left:1px solid #EEE;
    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 #EEE;
    border-right:1px solid #EEE;
}
</style>
…… …… ……
<body>
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</body>

 

 

 

 

 

 

posted @ 2012-10-09 17:27  ★柳暗花明★  阅读(1349)  评论(1)    收藏  举报