<html>
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.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;
/*box-shadow: 0 1px 2px rgba(12,0,0,.2);*/
}
.button:active {
position: relative;
top: 1px;
}
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
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');
}
/* CSS container shadow */
</style>
</head>
<body>
<input type="button" class="button orange" value="test" />
</body>
</html>
分享到：
相关推荐
目前CSS3的应用已经越来越普及了，它最常见的一个圆角功能非常的不错，可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果，本实例就是一款直接用CSS3实现的，无需其他任何JS或者flash、亦不需任何...
HTML5 css3渐变按钮代码，无使用任何JS和图片来修饰的渐变按钮，虽然样式不多，但会明确的告诉你如何实现，原理 是什么，搞懂了想做出这种按钮，那就是轻松的事了。
圆角按钮宽度自适应 自适应宽度的CSS圆角背景的按钮
HTML5 CSS3制作的带图标的不规则按钮，这些不规则的形状其实是有规则的，像圆角、椭圆、梯形等，只不过是印象中比矩形的按钮稍微些，但是这些按钮应用在网页上，感觉很有个性哦，让人眼前一亮的感觉，按钮是带有图标...
CSS3不同背景颜色的圆角按钮 CSS3不同背景颜色的圆角按钮
现在在来分享一款CSS3按钮，首先这款CSS3按钮是圆角的，正常情况下有着不同颜色的边框线，按钮是空心的，鼠标滑过按钮时，按钮即以淡入的效果填充背景色，鼠标移出时又以淡出的效果取消背景色，是一款简单而又实用的...
CSS3漂亮的圆角自适应长度按钮特效，按钮可跟随文字数量的多少自动适应宽度。
CSS自适应宽度圆角按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta ...
使用CSS3制作漂亮的圆角按钮是一款纯CSS3实现的圆形修变按钮特效。
这是一组共78个使用纯CSS3制作的方形圆角立体质感按钮。这些按钮都带有3D立体质感，按钮上的图标使用Zocial字体图标制作。这些按钮都带有鼠标滑过样式和鼠标点击样式，可以直接使用。
CSS圆角边框、按钮插件CSS圆角边框、按钮插件CSS圆角边框、按钮插件
漂亮，简单的圆角按钮 纯css input a
一些由HTML5/CSS3编写实现的按钮特效，全部是一些圆角的按钮效果，看上去挺有美感的，还有鼠标悬停特效，放在按钮上，按钮背景会有轻微变化，满足操作时的响应功能，因使用有CSS3部分属性，因此测试请使用火狐或...
7种CSS3特效动画效果，鼠标hover之后的动画效果相当不错，下拉效果，右移效果，箭头划过效果等等
大名鼎鼎的sexybuttons，博客园目前就是用的这个。这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？这样有20个字符了么？
在上MSDN时发现右上角的圆角按钮很漂亮,自己用CSS做了一个,效果跟MSDN的一模一样,现在给大家参考参考
html5 css3动态按钮特效集代码，具备动画效果的按钮特效，而且按钮的形状也有很多是不同的，比如圆角的，带图标的，每一款按钮都附有代码说明，拿去学习的话，是相当不错的。在CSS3环境下实现具备动画效果的按钮，...
Dreamweaver怎么用CSS制作圆角按钮？Dreamweaver中想要制作一个圆角按钮，鼠标经过按钮按钮变色，该怎么制作这个效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下
近100款漂亮CSS3/HTML5按钮合集，圆角，水晶按钮，红色的，黑色的，黄色的，各种颜色的，另外还都是圆角的按钮，用CSS3纯代码制作的菜单，无使用任何修饰性图片，想当八错。