CSS 定义的50个精美按钮下载
做网页的避免不了设计按钮,比如“提交”、“确认”等等,而使用 Dreamweaver 默认生成的按钮样式过于简单,很多朋友都喜欢用 css 来定义按钮样式,可以做出很多出彩的效果,比如用图片做背景、鼠标经过变换按钮颜色等等。
今天园子分享的这套用 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个精美按钮
原创文章如转载,请注明:转载自园子博客 [ http://www.yzznl.cn ]






