超多的CSS3圓角漸變網頁按鈕

2024-09-05 12:18:54

字體：大中小

來源：轉載

供稿：網友

收集了近50個基于CSS3技術實現的圓角漸變網頁按鈕，各種顏色、各種漸變方式，有大的有小的，總會有你需要的吧，有50個左右，使用HTML5和CSS3技術，因此在測試時請使用火狐或chrome瀏覽器，不管你是學習CSS3或是想用這些按鈕。挺不錯吧。

<!DOCTYPE html><head><title>超多的CSS3圓角漸變按鈕</title><style type="text/css">body {	background: #ededed;	width: 900px;	margin: 30px auto;	color: #999;}p {	margin: 0 0 2em;}h1 {	margin: 0;}a {	color: #339;	text-decoration: none;}a:hover {	text-decoration: underline;}div {	padding: 20px 0;	border-bottom: solid 1px #ccc;}.button {	display: inline-block;	zoom: 1;	*display: inline;	vertical-align: baseline;	margin: 0 2px;	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;}.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;}/* black */.black {	color: #d7d7d7;	border: solid 1px #333;	background: #333;	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));	background: -moz-linear-gradient(top,  #666,  #000);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');}.black:hover {	background: #000;	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));	background: -moz-linear-gradient(top,  #444,  #000);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}.black:active {	color: #666;	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));	background: -moz-linear-gradient(top,  #000,  #444);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}/* gray */.gray {	color: #e9e9e9;	border: solid 1px #555;	background: #6e6e6e;	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));	background: -moz-linear-gradient(top,  #888,  #575757);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');}.gray:hover {	background: #616161;	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');}.gray:active {	color: #afafaf;	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));	background: -moz-linear-gradient(top,  #575757,  #888);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');}/* 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');}/* red */.red {	color: #faddde;	border: solid 1px #980c10;	background: #d81b21;	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');}.red:hover {	background: #b61318;	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));	background: -moz-linear-gradient(top,  #c9151b,  #a11115);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');}.red:active {	color: #de898c;	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}/* 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');}/* rosy */.rosy {	color: #fae7e9;	border: solid 1px #b73948;	background: #da5867;	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');}.rosy:hover {	background: #ba4b58;	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');}.rosy:active {	color: #dca4ab;	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');}/* 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');}/* pink */.pink {	color: #feeef5;	border: solid 1px #d2729e;	background: #f895c2;	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');}.pink:hover {	background: #d57ea5;	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));	background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');}.pink:active {	color: #f3c3d9;	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));	background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');}</style></head><body><h1>CSS3 Gradient Buttons</h1><p><em>by</em> Web Designer Wall</p><div>	Rectangle  or	Rounded Can be	Medium or 	Small	<br /><br />	<input class="button black" type="button" value="Input Element" /> 	<button class="button black">Button Tag</button>	<span id="r99fndn"    class="button black">Span</span> 	<div   id="trz59r9"   class="button black">Div</div> 	<p class="button black">P Tag</p> 	<h3 class="button black">H3</h3> </div><div>	Gray 	Rounded 	Medium 	Small 	<br /><br />	<input class="button gray" type="button" value="Input Element" /> 	<button class="button gray">Button Tag</button>	<span id="znzz3v3"    class="button gray">Span</span> 	<div   id="zf3ttdj"   class="button gray">Div</div> 	<p class="button gray">P Tag</p> 	<h3 class="button gray">H3</h3> </div><div>	White 	Rounded 	Medium 	Small 	<br /><br />	<input class="button white" type="button" value="Input Element" /> 	<button class="button white">Button Tag</button>	<span id="93llv39"    class="button white">Span</span> 	<div   id="9pr9fnt"   class="button white">Div</div> 	<p class="button white">P Tag</p> 	<h3 class="button white">H3</h3> </div><div>	Orange 	Rounded 	Medium 	Small 	<br /><br />	<input class="button orange" type="button" value="Input Element" /> 	<button class="button orange">Button Tag</button>	<span id="19jr9dv"    class="button orange">Span</span> 	<div   id="v3bjrjr"   class="button orange">Div</div> 	<p class="button orange">P Tag</p> 	<h3 class="button orange">H3</h3> </div><div>	Red 	Rounded 	Medium 	Small 	<br /><br />	<input class="button red" type="button" value="Input Element" /> 	<button class="button red">Button Tag</button>	<span id="lltldnn"    class="button red">Span</span> 	<div   id="lj9f19h"   class="button red">Div</div> 	<p class="button red">P Tag</p> 	<h3 class="button red">H3</h3> </div><div>	Blue 	Rounded 	Medium 	Small 	<br /><br />	<input class="button blue" type="button" value="Input Element" /> 	<button class="button blue">Button Tag</button>	<span id="vn9tjzr"    class="button blue">Span</span> 	<div   id="tzz175h"   class="button blue">Div</div> 	<p class="button blue">P Tag</p> 	<h3 class="button blue">H3</h3> </div><div>	Rosy 	Rounded 	Medium 	Small 	<br /><br />	<input class="button rosy" type="button" value="Input Element" /> 	<button class="button rosy">Button Tag</button>	<span id="r3hhx9h"    class="button rosy">Span</span> 	<div   id="3d9xpxx"   class="button rosy">Div</div> 	<p class="button rosy">P Tag</p> 	<h3 class="button rosy">H3</h3> </div><div>	Green 	Rounded 	Medium 	Small 	<br /><br />	<input class="button green" type="button" value="Input Element" /> 	<button class="button green">Button Tag</button>	<span id="rp3ttdt"    class="button green">Span</span> 	<div   id="d19nxzx"   class="button green">Div</div> 	<p class="button green">P Tag</p> 	<h3 class="button green">H3</h3> </div><div>	Pink 	Rounded 	Medium 	Small 	<br /><br />	<input class="button pink" type="button" value="Input Element" /> 	<button class="button pink">Button Tag</button>	<span id="9bjl9tb"    class="button pink">Span</span> 	<div   id="pprz3t9"   class="button pink">Div</div> 	<p class="button pink">P Tag</p> 	<h3 class="button pink">H3</h3> </div></body></html>

上一篇：基于jQuery.jMagnify.js的HTML5文字突出展示特效

下一篇：CSS3 canvas示例：漂亮 Logo