CSS3渐变按钮
上⽂介绍了，本⽂将介绍CSS渐变的实际应⽤，⼀系列纯CSS制作的渐变按钮。这些按钮都是根据字体⼤⼩可伸缩的，可以通过改
变padding和font-size来调整按钮⼤⼩。这种⽅法最⼤的好处是可以应⽤到任何HTML元素，如div、span、p、a、button、input等。
CSS3渐变、阴影按钮
这些按钮的特别之处
纯CSS：没有图⽚和Javascript
渐变跨浏览器⽀持(IE, Firefox 3.6, Chrome, and Safari)
三种按钮状态：正常，悬停，激活
可以应⽤在任何HTML元素：a、input、button、span、div、p、h3，等等
预留退路：如果⽤户代理不⽀持CSS 3，则显⽰没有渐变和阴影的普通按钮
不同浏览器下预览
下⾯的图⽚展⽰了按钮在不同浏览器中的显⽰效果。
CSS3按钮在不同浏览器下的显⽰效果
按钮状态
正常状态：有边框的渐变和阴影
⿏标悬停：⽐较暗的渐变
⿏标按下：翻转渐变，1xp下沉，更深的字体颜⾊
CSS3按钮状态
按钮样式
下⾯的代码是.button类的⼀般样式，padding和border-radius使⽤em单位，可以使按钮根据font-size伸缩。要调整按钮⼤⼩，改变border-radius、font-size、padding值即可。例如：可以痛缩⼩字号（font-size）和内边距（padding）创建稍⼩的按钮（）。
关于border-radius、text-shadow、box-shadow更多详情，请查看。
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100%Arial, Helvetica, sans-serif;
padding: .5em2em.55em;
text-shadow: 01px1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-
moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 01px2px rgba(0,0,0,.2);
-moz-box-shadow: 01px2px rgba(0,0,0,.2);
box-shadow: 01px2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
CCS3按钮通⽤样式
渐变⾊样式
下⾯是橙⾊按钮的样式代码。第⼀个背景设置是为不⽀持CSS 3的浏览器预留的退路，第⼆个针对Webkit浏览器，第三个针对Firefox，最后⼀个是仅能被IE识别的渐变滤镜。
关于CSS渐变的更多详情，请查看⼀⽂。
.orange {
color: #fef4e9;
border: solid1px#da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:adient(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:adient(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:adient(startColorstr='#f47a20', endColorstr='#faa51a');
}
CSS按钮颜⾊样式
直接使⽤演⽰中的按钮
假设你想在你的⽹页中使⽤蓝⾊的按钮：
⾸先，查看演⽰页⾯源代码，拷贝.button、.blue样式；
然后，在想使⽤按钮的元素上添加class="button blue"(例如），CSS类可以应⽤于任何元素。
使⽤演⽰中的按钮
This entry was posted in and tagged , , , , by . Bookmark the .css鼠标点击样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。