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

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

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

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

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

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

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

代码解释:

HTML 代码:


上述代码主要是定义了按钮的样式,其中 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个精美按钮

CSS 定义的50个精美按钮下载》上有38条评论

  1. 任侠

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

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

    志文工作室

发表评论