網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

CSS漂亮的弧形按鈕菜單_菜單導(dǎo)航特效

CSS漂亮的弧形按鈕菜單，本菜單是從國外網(wǎng)站扒下來的，用到有兩個背景修飾圖片，順著地址下載下來。
　　本菜單兼容性良好，非常適適用作網(wǎng)站導(dǎo)航，菜單項可以自適應(yīng)菜單文字寬度，更人性化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>按鈕菜單</title>
<style type="text/css">
a.ovalbutton{
background: transparent url('http://p1.mb5u.com/texiao/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma;
line-height: 16px; 
height: 24px;
padding-left: 11px; 
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; }
a.ovalbutton span{
background: transparent url('http://p1.mb5u.com/texiao/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; 
}

a.ovalbutton:hover{
background-position: bottom left;
}

a.ovalbutton:hover span{ 
background-position: bottom right;
color: black;
}

.buttonwrapper{
overflow: hidden; 
width: 100%;
}

</style>
</head>
<body>
<h4>Single button:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="/jscss/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="/" style="margin-left: 6px"><span>Welcome</span></a>
</div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關(guān)菜單導(dǎo)航特效：

CSS漂亮的弧形按鈕菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些