当前位置:园子博客 » 网站应用 » CSS 定义的50个精美按钮下载

CSS 定义的50个精美按钮下载

1月 16th, 2010 | Filed under 网站应用 | 共有26,533次浏览

做网页的避免不了设计按钮,比如“提交”、“确认”等等,而使用 Dreamweaver 默认生成的按钮样式过于简单,很多朋友都喜欢css 来定义按钮样式,可以做出很多出彩的效果,比如用图片做背景、鼠标经过变换按钮颜色等等。

今天园子分享的这套用 CSS 定义的50个精美按钮,可以说已经包含了最常用的网页设计需求,你可以直接拿来使用,省去了去写代码或找图片的时间。

先来看下截图吧,以下仅是一部分按钮的截图,查看更多请在本页面下方链接下载压缩包。

CSS 定义的50个精美按钮部分截图

CSS 定义的50个精美按钮部分截图

怎么样?是不是很漂亮呢?

代码解释:

HTML 代码:

<input type="button" class="btn11" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" value="Sbumit" />

上述代码主要是定义了按钮的样式,其中 onmouseover 和 onmouseout就是定义鼠标经过与离开出现的不同背景图片样式,class 则是调用了按钮的 CSS 样式。

再来看下 CSS:

.btn11 {
	width:143px;
	height:40px;
	background:url("image/button/bg11.jpg") no-repeat left top;
	color:#FFF;
}

这段 CSS 主要定义了按钮的宽和高,以及背景图片的显示方式、文字颜色。

通过修改 CSS 样式你就可以制作出千变万化的按钮样式,有兴趣的朋友自己动手试试吧!

点此立即下载CSS 定义的50个精美按钮

  1. 一水江南
    8月 16th, 201212:21

    非常漂亮的样式,刚好缺这个,借用了,哈哈哈

  2. stone
    5月 21st, 201104:18

    解压后发现文件没有后缀,不知道怎么样打开。请问文件的后缀是什么呀?

  3. 土包子
    2月 3rd, 201009:21

    不错,不错

  4. Firm
    1月 20th, 201001:43

    GOOD,不错的素材

  5. jnsmfw
    1月 19th, 201017:03

    不错,正要找这些,有空常来学习一下,div,css最近比较有兴趣

  6. Martin
    1月 19th, 201014:53

    这些按钮,就是看看也很享受

  7. 胡余丰
    1月 19th, 201013:43

    不错呀
    的确很漂亮

  8. YYWR
    1月 19th, 201012:47

    不错我喜欢

  9. AnQ
    1月 19th, 201011:07

    我比较喜欢带圆角的这几个,不错,要用到我的博客里面呵呵

  10. John
    1月 19th, 201010:37

    我先不下了,8错8错。用的时候来这里拿,岂不省事?

  11. 卢松松
    1月 18th, 201022:13

    有源文件就好

  12. 漢文溪
    1月 18th, 201021:48

    园子你真是太棒了 赞一个 下了先

  13. 伏少雄
    1月 18th, 201016:12

    很漂亮…

  14. 百学山
    1月 18th, 201016:04

    不错,很漂亮嘛!

  15. 妮裳神话
    1月 18th, 201016:04

    我现在才发现我有很久很久没有到你这边来坐坐了,我的错,以后不会忘了,呵呵!

  16. 任侠
    1月 18th, 201015:51

    园子博客人气变的很旺盛了啊

    本站由于空间问题,停了一段时间
    现已恢复正常,希望能与贵站恢复友链
    给您带来的不便深表歉意

    志文工作室

  17. diyidu
    1月 18th, 201013:27

    很好的素材,收藏啦。

  18. 电脑技术学习
    1月 18th, 201010:41

    非常不错哦!

  19. 1月 18th, 201003:15

    :mrgreen: 我对这个没什么要求。那么小,应该没有多少人去注意这个吧。

  20. 老姚
    1月 17th, 201023:20

    好久没来,博客发展得很是不错啊

  21. 风云春秋博客
    1月 17th, 201017:20

    兄弟们 风云春秋博客我又回来了 新的域名 新的启程 2010年了大家一起努力啊!
    新的域名:http://www.hixiaobo.com/ 有空大家常去坐坐哦!

  22. 日记男孩
    1月 17th, 201014:12

    的确很精美,谢谢分享

  23. 吖Bee
    1月 17th, 201011:52

    很好的素材,过目过目先

  24. huangjun
    1月 17th, 201011:14

    改成中文的话,用的人肯定更多了~

  25. 疾风
    1月 17th, 201003:08

    大多数很漂亮,有机个很丑陋啊 O(∩_∩)O呵呵~

  26. 知道
    1月 17th, 201001:48

    还是挺不错的么!

  27. 先看看
    1月 17th, 201000:29

    有些还挺好看的

  28. 任侠
    1月 16th, 201022:54

    本站由于空间问题,停了一段时间
    现已恢复正常,希望能与贵站恢复友链
    给您带来的不便深表歉意

    志文工作室

  29. 仁心博客
    1月 16th, 201022:37

    真精美,多谢分享

  30. A.shun
    1月 16th, 201020:14

    是很漂亮,我也对一些链接进行美化,但是都比较简单

  31. 江流
    1月 16th, 201019:22

    好漂亮啊!

  32. SErHo
    1月 16th, 201017:22

    好漂亮啊

  33. 北街
    1月 16th, 201015:24

    漂亮,偶要下载~ 😎

  34. Zenoven自由人
    1月 16th, 201012:57

    嗯 确实很漂亮 哈哈~~

  35. Tony
    1月 16th, 201010:36

    这么好的东西怎么能错过啊 !

您必须在 登录 后才能发布评论.