CCS3制作时尚美观的渐变按钮
来源:互联网 发布:电信宽带测速软件下载 编辑:程序博客网 时间:2024/04/28 06:01
上文介绍了CSS渐变的跨浏览器实现,本文将介绍CSS渐变的实际应用,点击查看一系列纯CSS制作的渐变按钮。这些按钮都是根据字体大小可伸缩的,可以通过改变padding
和font-size
来调整按钮大小。这种方法最大的好处是可以应用到任何HTML元素,如div
、span
、p
、a
、button
、input
等。
这些按钮的特别之处
- 纯CSS:没有图片和Javascript
- 渐变跨浏览器支持(IE, Firefox 3.6, Chrome, and Safari)
- 三种按钮状态:正常,悬停,激活
- 可以应用在任何HTML元素:a、input、button、span、div、p、h3,等等
- 预留退路:如果用户代理不支持CSS 3,则显示没有渐变和阴影的普通按钮
不同浏览器下预览
下面的图片展示了按钮在不同浏览器中的显示效果。
按钮状态
- 正常状态:有边框的渐变和阴影
- 鼠标悬停:比较暗的渐变
- 鼠标按下:翻转渐变,1xp下沉,更深的字体颜色
按钮样式
下面的代码是.button类的一般样式,padding
和border-radius
使用em单位,可以使按钮根据font-size
伸缩。要调整按钮大小,改变border-radius
、font-size
、padding
值即可。例如:可以痛缩小字号(font-size
)和内边距(padding
)创建稍小的按钮(查看演示)。
关于border-radius
、text-shadow
、box-shadow
更多详情,请查看CSS 3 基础。
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
渐变色样式
下面是橙色按钮的样式代码。第一个背景设置是为不支持CSS 3的浏览器预留的退路,第二个针对Webkit浏览器,第三个针对Firefox,最后一个是仅能被IE识别的渐变滤镜。
关于CSS渐变的更多详情,请查看CSS渐变跨浏览器实现一文。
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
直接使用演示中的按钮
假设你想在你的网页中使用蓝色的按钮:
- 首先,查看演示页面源代码,拷贝
.button
、.blue
样式; - 然后,在想使用按钮的元素上添加
class="button blue"
,CSS类可以应用于任何元素。
0 0
- CCS3制作时尚美观的渐变按钮
- 如何制作渐变的按钮
- 实现一个清新美观的加载按钮
- 如何制作出非常美观的网页
- 通道&渐变——金属按钮制作
- js拖拽框制作的时尚小钟表
- ps制作一双时尚的高跟鞋教程
- 自定义View实战--实现一个清新美观的加载按钮
- 有关网页的制作的实用和美观
- Android自定义控件之美观的实用型统计表的制作
- j2me中低级界面的主界面制作(可美观性很强)
- 使用 sphinx 制作简洁而又美观的文档
- 使用 sphinx 制作简洁而又美观的文档
- 使用 sphinx 制作简洁而又美观的文档
- 网页制作:一个简易美观的登录界面
- 用bootstrap 制作一个简洁美观的页面
- 用css和jquery制作美观的alert
- flash actionscript3.0 beginGradientFill渐变填充 水晶按钮制作
- linux中断下半部的处理
- 如何在Eclipse下查看JDK源代码
- LeetCode *** 237. Delete Node in a Linked List
- java从字符串中截取数字
- 03-树2 List Leaves
- CCS3制作时尚美观的渐变按钮
- 【WPF】将DataGrid内容导出到Excel
- 1005. 继续(3n+1)猜想 (25)
- Mxnet make : /usr/bin/ld -lippicv not found
- IOS初学笔记,啥都不懂
- Java WEB 总结 JSP篇--源自技术
- Linux学习32_每天一个linux命令(61):wget命令
- 星巴克“奢侈”的用户体验思维模式
- 我一直在centos7上面安装docker不成功,用下面的办法解决,就是换了一个epel源