9种样式CSS3 渐变按钮集

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS3 3D渐变按钮代码</title>

<style>

body

{

background: #e5e5e5;

text-align: center;

}

.button

{

margin: 10px;

text-decoration: none;

font: bold 1.5em ‘Trebuchet MS‘,Arial, Helvetica; /*Change the em value to scale the button*/

display: inline-block;

text-align: center;

color: #fff;

border: 1px solid #9c9c9c;

border: 1px solid rgba(0, 0, 0, 0.3);

text-shadow: 0 1px 0 rgba(0,0,0,0.4);

box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span

{

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span

{

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;

background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;

}

.button:hover

{

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active

{

position: relative;

top: 1px;

}

.button-khaki

{

background: #A2B598;

background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4), to(#A2B598) );

background:-moz-linear-gradient(-90deg, #BDD1B4, #A2B598);

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#BDD1B4‘, EndColorStr=‘#A2B598‘);

}

.button-khaki:hover

{

background: #BDD1B4;

background: -webkit-gradient(linear, left top, left bottom, from(#A2B598), to(#BDD1B4) );

background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4);

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#A2B598‘, EndColorStr=‘#BDD1B4‘);

}

.button-khaki:active

{

background: #A2B598;

}

.button-blue

{

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#81a8cb‘, endColorstr=‘#4477a1‘);

}

.button-blue:hover

{

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#4477a1‘, endColorstr=‘#81a8cb‘);

}

.button-blue:active

{

background: #4477a1;

}

.button-brown

{

background: #8f3714;

background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );

background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#bf6f50‘, EndColorStr=‘#8f3714‘);

}

.button-brown:hover

{

background: #bf6f50;

background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );

background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#8f3714‘, EndColorStr=‘#bf6f50‘);

}

.button-brown:active

{

background: #8f3714;

}

.button-green

{

background: #428739;

background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );

background: -moz-linear-gradient(-90deg, #c8dd95, #428739);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#c8dd95‘, EndColorStr=‘#428739‘);

}

.button-green:hover

{

background: #c8dd95;

background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );

background: -moz-linear-gradient(-90deg, #428739, #c8dd95);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#428739‘, EndColorStr=‘#c8dd95‘);

}

.button-green:active

{

background: #428739;

}

.button-red

{

background: #D82741;

background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );

background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#E84B6E‘, EndColorStr=‘#D82741‘);

}

.button-red:hover

{

background: #E84B6E;

background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );

background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#D82741‘, EndColorStr=‘#E84B6E‘);

}

.button-red:active

{

background: #D82741;

}

.button-purple

{

background: #6F50E7;

background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );

background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#B8A9F3‘, EndColorStr=‘#6F50E7‘);

}

.button-purple:hover

{

background: #B8A9F3;

background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );

background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#6F50E7‘, EndColorStr=‘#B8A9F3‘);

}

.button-purple:active

{

background: #6F50E7;

}

.button-black

{

background: #141414;

background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) );

background: -moz-linear-gradient(-90deg, #656565, #141414);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#656565‘, EndColorStr=‘#141414‘);

}

.button-black:hover

{

background: #656565;

background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) );

background: -moz-linear-gradient(-90deg, #141414, #656565);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#141414‘, EndColorStr=‘#656565‘);

}

.button-black:active

{

background: #141414;

}

.button-orange

{

background: #f09c15;

background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );

background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#f8c939‘, EndColorStr=‘#f09c15‘);

}

.button-orange:hover

{

background: #f8c939;

background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );

background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#f09c15‘, EndColorStr=‘#f8c939‘);

}

.button-orange:active

{

background: #f09c15;

}

.button-silver

{

background: #c5c5c5;

background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c5c5c5) );

background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#eaeaea‘, EndColorStr=‘#c5c5c5‘);

}

.button-silver:hover

{

background: #eaeaea;

background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#eaeaea) );

background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#c5c5c5‘, EndColorStr=‘#eaeaea‘);

}

.button-silver:active

{

background: #c5c5c5;

}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<h1>Cross-browser CSS gradient buttons</h1>

<a href="#" class="button button-khaki"><span>Button</span></a>

<a href="/" class="button button-blue"><span>Button</span></a>

<a href="#" class="button button-brown"><span>Button</span></a>

<br>

<a href="#" class="button button-red"><span>Button</span></a>

<a href="#" class="button button-purple"><span>Button</span></a>

<a href="#" class="button button-green"><span>Button</span></a>

<br>

<a href="#" class="button button-black"><span>Button</span></a>

<a href="#" class="button button-orange"><span>Button</span></a>

<a href="#" class="button button-silver"><span>Button</span></a>

</body>

</html>

时间: 2024-10-11 10:36:38

9种样式CSS3 渐变按钮集的相关文章

9种css3渐变按钮

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 3D渐变按钮代码</title><style>body{background: #e5e5e5;text-align: center;}.button{margin: 10px;text-dec

一组简单好看的css3渐变按钮

主要代码如下: 1 body { 2 background:#fff 3 } 4 /* Mixins */ 5 /* bg shortcodes */ 6 .bg-gradient1 span,.bg-gradient1:before { 7 background:#52A0FD; 8 background:-webkit-linear-gradient(left,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%); 9 background:linear-gradient

36种漂亮的CSS3网页按钮Button样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="text/css"> body{ background: #f5faff; } .demo_con{ width: 960px; m

36种漂亮的CSS3网页按钮Button样式,总有你喜欢的

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>36种漂亮的CSS3网页按钮Button样式</title><style type="text/css">body{ background: #f5faff;}.demo_con{width: 960px;margin:40px

纯CSS3动画按钮效果 5种漂亮样式DEMO演示

Come in ! click to begin You'll get a lot ! My box with glow HomeSee Us AboutMeet Us ContactEmail Us Home About Services Portfolio Contact us Login ? Register ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

一款纯css3实现的颜色渐变按钮

之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <a target="_blank" class="btn green" href="http://www.w2bc.com/&q

CSS3实现的渐变按钮,在IE7、IE6下的滤镜使用。

  .ui-button { BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALI

9款经典华丽的CSS3分享按钮

如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介绍了9款经典华丽的CSS3分享按钮,以及它们的源代码,希望能给各位开发者带来一定的帮助. 1.jQuery/CSS3实现超酷的分享按钮 今天要分享的这款分享按钮是基于CSS和jQuery的,按钮比较大,非常大气. 在线演示 源码下载 2.jQuery交互式分享按钮 可横向展开 这次要给大家介绍一款基

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐