Index
Portfolio
Search
TagCloud
GuestBook
Admin
杜增强.COM
专注于Flex & AS3
几个漂亮Button的CSS
来源于Joecom'sblog:
http://blog.csdn.net/juwuyi
效果不错,值得参考!
注:仅在IE下有效。
HTML 代码:
<HTML>
<HEAD>
<TITLE> 几个漂亮Button的CSS </TITLE>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
</HEAD>
<BODY>
<h2>几个漂亮Button的CSS</h2>
除了CSDN的和e商2003的,其他皆为JoeCom原创按钮
转摘请注明出处 blog.csdn.net/juwuyi<BR>
<button class=btn title="这是CSDN的官方按钮"> 好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:blog.csdn.net/juwuyi"
> 好看的Green Button</button>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:blog.csdn.net/juwuyi"
> 好看的QQ Button</button>
<P>
<button class=btn_2k3 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:blog.csdn.net/juwuyi"> 好看的 2k3 Button</button>
</BODY>
</HTML>
标签:
css
分类目录: 资料 | 作者: dzq @ 2007-8-20 16:15:33
« 如何让DIV元素永远居中显示
Adobe CS3 简体中文精简版 »
0 条评论
留下评论
点击这里取消回复
名称
电子邮件 (不会被公开)
网站
分类目录
原创
(99)
资料
(685)
网闻
(153)
随笔
(17)
功能
新浪微博
Twitter
冀ICP备06026298号
文章
2012 February
(1)
2011 October
(4)
2010 December
(2)
2010 November
(1)
2010 October
(4)
2010 September
(1)
2010 August
(4)
2010 July
(3)
2010 June
(4)
2010 May
(2)
2010 April
(5)
2010 March
(10)
2010 February
(1)
2010 January
(3)
2009 December
(1)
2009 November
(1)
2009 October
(3)
2009 September
(2)
2009 August
(7)
2009 July
(1)
2009 June
(3)
2009 May
(9)
2009 April
(4)
2009 March
(15)
2009 February
(11)
2009 January
(6)
2008 December
(11)
2008 November
(14)
2008 October
(12)
2008 September
(18)
2008 August
(23)
2008 July
(20)
2008 June
(15)
2008 May
(31)
2008 April
(8)
2008 March
(46)
2008 February
(21)
2008 January
(14)
2007 December
(43)
2007 November
(60)
2007 October
(44)
2007 September
(90)
2007 August
(53)
2007 July
(9)
2007 June
(88)
2007 May
(61)
2007 April
(33)
2007 March
(6)
2007 February
(4)
2007 January
(19)
2006 December
(25)
2006 November
(21)
2006 October
(11)
2006 September
(25)
2006 August
(17)
2006 July
(4)