CSS做的按钮

<STYLE>TABLE,td,div {
FONT-SIZE: 9pt; CURSOR: hand; FONT-FAMILY: 宋体
}
BODY {
FONT-SIZE: 9pt; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #637994
}
.yellow {
BORDER-RIGHT: #8a6100 2px solid;
BORDER-TOP: #ffe3a4 2px solid;
BORDER-LEFT: #ffe3a4 2px solid; 
BORDER-BOTTOM: #8a6100 2px solid;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddec00',endColorStr='#ffffff');
}
.blue {
BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #a6c1df 2px solid; BORDER-LEFT: #a6c1df

2px solid; COLOR: #ffffff; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #3a6ea5
}
.green {
BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #b9ffb9 2px solid; BORDER-LEFT: #b9ffb9

2px solid; COLOR: #ffff00; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #008000
}
.menu {
BORDER-RIGHT: #FFFFFF 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000

2px solid; COLOR: #000080; BORDER-BOTTOM: #FFFFFF 2px solid; BACKGROUND-COLOR: #d8d8d0
}
.menu1 {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #adbac9 2px solid; BORDER-LEFT: #adbac9

2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #637994
}
.blue1 {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0ecff 2px solid; BORDER-LEFT: #d0ecff

2px solid; COLOR: #ffff00; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #0099ff
}
.black {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0d0d0 2px solid; BORDER-LEFT: #d0d0d0

2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #000000
}
</STYLE>
<DIV class=yellow id=up
style="left: 294; width: 196; position: absolute; top: 79; height: 72">
<P align=center><br/>
<br/>
有立体效果的层 </P></DIV>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=400 border=0>
  <TBODY>
  <TR>
    <TD class=menu onclick='c("menu")' align=middle width=50>灰</TD>
    <TD class=green onclick='c("green")' align=middle width=50>绿</TD>
    <TD class=blue onclick='c("blue")' align=middle width=50>蓝</TD>
    <TD class=yellow onclick='c("yellow")' align=middle width=50>黄</TD>
    <TD class=menu1 onclick='c("menu1")' align=middle width=50>灰1</TD>
    <TD class=blue1 onclick='c("blue1")' align=middle width=50>浅蓝</TD>
    <TD class=black onclick='c("black")' align=middle width=50>黑</TD>
    <TD align=middle
width=50></TD></TR></TBODY></TABLE></CENTER></DIV>
<SCRIPT>
function c(css)
{up.className=css;
}
</SCRIPT>

---

<style type="text/css">TABLE,td,div {FONT-SIZE: 9pt; CURSOR: hand; FONT-FAMILY: 宋体}BODY {FONT-SIZE: 9pt; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #637994}.yellow {BORDER-RIGHT: #8a6100 2px solid; BORDER-TOP: #ffe3a4 2px solid; BORDER-LEFT: #ffe3a4 2px solid; BORDER-BOTTOM: #8a6100 2px solid; FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddec00',endColorStr='#ffffff');}.blue {BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #a6c1df 2px solid; BORDER-LEFT: #a6c1df 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #3a6ea5}.green {BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #b9ffb9 2px solid; BORDER-LEFT: #b9ffb9 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #008000}.menu {BORDER-RIGHT: #FFFFFF 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; COLOR: #000080; BORDER-BOTTOM: #FFFFFF 2px solid; BACKGROUND-COLOR: #d8d8d0}.menu1 {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #adbac9 2px solid; BORDER-LEFT: #adbac9 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #637994}.blue1 {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0ecff 2px solid; BORDER-LEFT: #d0ecff 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #0099ff}.black {BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0d0d0 2px solid; BORDER-LEFT: #d0d0d0 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #000000}</style>

有立体效果的层

灰

绿

蓝

黄

灰1

浅蓝

黑

<script type="text/javascript">function c(css){up.className=css;}</script>

分享到：

CSS做的漂亮按钮 | 一幅CSS做的对联

• 2005-07-09 18:48
• 浏览 1240
• 评论(0)
• 查看更多