本文提供了一组使用CSS设计的精美按钮样式代码示例，展示了如何通过简单的HTML标签结合CSS属性来实现不同样式的按钮效果，适用于网站导航和其他交互元素的设计。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>收藏的几个css按钮样式</title>
<style>
<!--
body { font-family: Tahoma; font-size: 8pt }
.leftmenu {
width:150px;
}
.leftmenu li {
display: inline;
white-space: nowrap;
}
.leftmenu span,
.leftmenu a:active,
.leftmenu a:visited,
.leftmenu a:link {
display: block;
text-decoration: none;
margin: 6px 10px 6px 0px;
padding: 2px 6px 2px 6px;
color: #00527f;
background-color: #d9e8f3;
border: 1px solid #004266;
}
.leftmenu a:hover {
color: red;
background-color: #8cbbda;
}
.leftmenu span {
color: #a13100;
}
-->
</style>
</head>
漂亮的按钮
<body>
<ul class="leftmenu">
<li><a target="_blank" href="http://www.microsoft.com/china">www.Microsoft.com</a>
<li><a target="_blank" href="http://www.google.com">www.Google.com</a>
<li><a target="_blank" href="http://www.youkuaiyun.com/">www.youkuaiyun.com</a>
</ul>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>收藏的几个css按钮样式</title>
<style>
<!--
body { font-family: Tahoma; font-size: 8pt }
.leftmenu {
width:150px;
}
.leftmenu li {
display: inline;
white-space: nowrap;
}
.leftmenu span,
.leftmenu a:active,
.leftmenu a:visited,
.leftmenu a:link {
display: block;
text-decoration: none;
margin: 6px 10px 6px 0px;
padding: 2px 6px 2px 6px;
color: #00527f;
background-color: #d9e8f3;
border: 1px solid #004266;
}
.leftmenu a:hover {
color: red;
background-color: #8cbbda;
}
.leftmenu span {
color: #a13100;
}
-->
</style>
</head>
漂亮的按钮
<body>
<ul class="leftmenu">
<li><a target="_blank" href="http://www.microsoft.com/china">www.Microsoft.com</a>
<li><a target="_blank" href="http://www.google.com">www.Google.com</a>
<li><a target="_blank" href="http://www.youkuaiyun.com/">www.youkuaiyun.com</a>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
