div+CSS3实现圆角按钮代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>div+CSS3实现制作精美漂亮的圆角按钮特效代码</title>
<style type="text/css">
.demo{width:760px; margin:20px auto 0 auto; height:70px;}
.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 16px/100% 'Microsoft yahei',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;
}
.bigrounded {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;
}
.medium {font-size: 12px;padding: .4em 1.5em .42em;
}
.small {font-size: 11px;padding: .2em 1em .275em;
}/* blue */
.blue {color: #d9eef7;border: solid 1px #0076a3;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));background: -moz-linear-gradient(top,  #00adee,  #0078a5);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {background: #007ead;background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));background: -moz-linear-gradient(top,  #0095cc,  #00678e);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {color: #80bed6;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));background: -moz-linear-gradient(top,  #0078a5,  #00adee);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}/* green */
.green {color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {color: #a9c08c;background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}/* white */
.white {color: #606060;border: solid 1px #b7b7b7;background: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));background: -moz-linear-gradient(top,  #fff,  #ededed);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {background: #ededed;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));background: -moz-linear-gradient(top,  #fff,  #dcdcdc);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {color: #999;background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));background: -moz-linear-gradient(top,  #ededed,  #fff);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}/* orange */
.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');
}</style>
</head><body><div id="main"><div class="demo"><a href="#" class="button blue">蓝色</a> <a href="#" class="button blue bigrounded">圆形</a> <a href="#" class="button blue medium">中btn</a> <a href="#" class="button blue small">小btn</a> <input class="button blue" type="button" value="Input 元素" /> <button class="button blue">按钮标签</button></div><div class="demo"><a href="#" class="button green">绿色</a> <a href="#" class="button green bigrounded">圆形</a> <a href="#" class="button green medium">中btn</a> <a href="#" class="button green small">小btn</a> <input class="button green" type="button" value="Input 元素" /> <button class="button green">按钮标签</button></div><div class="demo"><a href="#" class="button white">灰白</a> <a href="#" class="button white bigrounded">圆形</a> <a href="#" class="button white medium">中btn</a> <a href="#" class="button white small">小btn</a> <input class="button white" type="button" value="Input 元素" /> <button class="button white">按钮标签</button></div><div class="demo"><a href="#" class="button orange">橘红</a> <a href="#" class="button orange bigrounded">圆形</a> <a href="#" class="button orange medium">中btn</a> <a href="#" class="button orange small">小btn</a> <input class="button orange" type="button" value="Input 元素" /> <button class="button orange">按钮标签</button></div></div>
</body>
</html>

div+CSS3实现圆角按钮代码相关推荐

【转载】无需图片，使用CSS3实现圆角按钮
原文地址:http://www.open-open.com/home/space-37924-do-blog-id-5789.html 首先来看看效果: 事例HTML代码: <a href=&q ...
css3设置div边角是圆角
使用css3设置div边角是圆角代码如下 -moz-border-radius:7px; -webkit-border-radius: 7px
圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
CSS3作为对CSS的升级,将原有的一些大模块分解为更小更易于表达的小模块,取得了相当的好评,也使得开发周期变短.过程变得愉快! 今天分享一下自己使用的基于CSS3的一组圆角按钮,效果不错,但欢迎升级 ...
使用HTML5+CSS3制作圆角内发光按钮----示例
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
html圆圈中打钩代码,CSS3点击按钮圆形进度打钩效果的实现代码
文章目录八.CSS3点击按钮圆形进度打钩效果8.1 图片预览8.2 index.html代码8.3 style.css代码八.CSS3点击按钮圆形进度打钩效果 8.1 图片预览 8.2 index ...
CSS3新技术:圆角、透明、阴影和大小
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性.尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的.暴风彬彬将在这 ...
CSS自适应宽度圆角按钮
CSS自适应宽度圆角按钮,背景图要使用满足最长按钮的宽度,然后通过两个标签a, span,一个通过背景图的左对齐,一个通过背景图的右对齐. <!DOCTYPE html PUBLIC " ...
html div怎么设置圆角,jquery设置div圆角
要设置DIV的圆角,最简单的办法莫过于使用CSS3配合HTML5,如果加上jquery,那么就更加灵活了,下面我们看几个例子. 首先看看下面的这个图,下面的有编号内容的这个DIV,正是圆角的DIV,要 ...
汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构该按钮变形动画使用嵌套的H ...

div+CSS3实现圆角按钮代码

div+CSS3实现圆角按钮代码相关推荐

最新文章

热门文章