Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[素材] 收藏的几个css按钮样式

[复制链接]
muycn8 发表于 2010-7-25 22:53:16 | 显示全部楼层 |阅读模式
本帖最后由 muycn8 于 2010-7-25 22:56 编辑
  1. <style>
  2. .btn {
  3. 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
  4. }
  5. .btn1_mouseout {
  6. 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
  7. }
  8. .btn1_mouseover {
  9. 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
  10. }
  11. .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
  12. .btn3_mouseout {
  13. 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
  14. }
  15. .btn3_mouseover {
  16. 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
  17. }
  18. .btn3_mousedown
  19. {
  20. 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
  21. }
  22. .btn3_mouseup {
  23. 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
  24. }
  25. .btn_2k3 {
  26. 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
  27. }
  28. </style>
  29. <body>

  30. <button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>
  31. <button
  32. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
  33. onmouseout="this.className='btn1_mouseout'"
  34. title="CSS样式按钮">CSS样式按钮</button> &nbsp;
  35. <button
  36. class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
  37. onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>
  38. <P>
  39. <button class=btn2 title="CSS样式按钮">CSS样式按钮</button>
  40. <P>
  41. <button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
  42. onmouseout="this.className='btn3_mouseout'"
  43. onmousedown="this.className='btn3_mousedown'"
  44. onmouseup="this.className='btn3_mouseup'"
  45. title="CSS样式按钮">CSS样式按钮</button>
  46. <P>
  47. <button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>
复制代码









本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
qxxiao 发表于 2010-8-1 17:06:43 | 显示全部楼层
回复

使用道具 举报

烈日轨迹 发表于 2010-8-2 11:36:46 | 显示全部楼层
呵呵,不错哦。收藏了~~
回复

使用道具 举报

烈日轨迹 发表于 2010-8-3 15:44:29 | 显示全部楼层
东西不错哦~~
回复

使用道具 举报

carlkyo 发表于 2010-8-5 11:07:12 | 显示全部楼层
回复

使用道具 举报

huac 发表于 2010-8-6 08:52:37 | 显示全部楼层
谢谢分享了的
回复

使用道具 举报

mels 发表于 2010-8-7 13:11:49 | 显示全部楼层
這個要怎使用??
回复

使用道具 举报

滚骨碌 发表于 2010-8-18 09:57:41 | 显示全部楼层
回复

使用道具 举报

小杯垫 发表于 2010-8-22 16:59:01 | 显示全部楼层
感觉虽然官方的不好看,也比楼主的好看多了..............
回复

使用道具 举报

poming 发表于 2010-8-28 19:33:38 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-10-2 22:22 , Processed in 0.157567 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表