首頁 > 開發者 > JavaScript

9種樣式CSS3 漸層按鈕集，9種樣式css3漸層

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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-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>http://www.999jiujiu.com/</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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css3 pdf css3 transition css3 text animation effects css3 missing manual css3 background image html5 css3 templates dreamweaver css3 animated buttons
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More