网页特效：个性化的网页按钮

{$MY_网站顶部} {$MY_频道栏目导航} {$MY_网站通栏广告} {$MY_频道导航}

网页特效：个性化的网页按钮

网页特效：个性化的网页按钮
副标题：
作者：佚名文章来源：网页教学网站长整理点击数：更新时间：2008-1-3 22:36:04


用CSS制作的超漂亮实用的网页按钮，如果您有用就直接拿过去用吧！ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>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> <button class=btn title="好看的按钮">好看的按钮</button><P> <button class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="好看的按钮">好看的按钮</button> <P> <button class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button> <P> <button class=btn2 title="好看的按钮">好看的按钮</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="好看的按钮">好看的按钮</button> <P> <button class=btn_2k3 title="好看的按钮">好看的按钮</button> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
文章录入：布冰责任编辑：布冰

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。本站地址：Http://Www.Gzwm.Net
	上一篇文章：网页特效代码：非常简洁的网页导航菜单下一篇文章：网页设计中不错的二级导航菜单特效
【字体：小大】发表评论加入收藏告诉好友打印此文关闭窗口

	完美解决使用酷狗2008搜
	常用电脑密码破解技巧
	CSS教程全解
	[组图]动易程序修改技巧
	[组图]Photoshop创意打
	[组图]photoshop教程：
	[组图]photoshop调色教
	[组图]让你操作Windows

	有效提高网站排名的七条
	Photoshop教程:冷色调M
	Dreamweaver制作网页13
	自己动手修改QQ等级
	QQ空间播放多首背景音乐
	QQ空间免费领养5级植物
	QQ鼠年新年贺词发给好
	能上QQ却打不开网页的原

用鼠标直接动态改
网页特效代码：模
网页中弹出小窗口
网页中弹出小窗口
关于限制网页表单

文章频道内容页加“

QQ聊天窗口也玩多标

超级flash幻灯片

给系统来次体检尝鲜

（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

{$MY_2006网页通用底部}