CSS漂亮的弧形按钮菜单

2024-09-05 12:19:49

字体：大中小

来源：转载

供稿：网友

CSS漂亮的弧形按钮菜单，本菜单是从国外网站扒下来的，用到有两个背景修饰图片，顺着地址下载下来。
　　本菜单兼容性良好，非常适合用作网站导航，菜单项可以自适应菜单文字宽度，更人性化。

<!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" content="text/html; charset=gb2312" /><title>按钮菜单</title><style type="text/css">a.ovalbutton{background: transparent url('/jscss/demoimg/200905/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('/jscss/demoimg/200905/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"><span>Dynamic Drive CSS Library</span></div><h4>Side by Side:</h4><div class="buttonwrapper"><span>Submit</span> <span>Welcome</span></div></body></html>

上一篇：教你一个最简单的CSS滑过变色的菜单

下一篇：带缺口导航的CSS菜单栏