cari

Rumah >hujung hadapan web >tutorial css >使用css样式制作的漂亮按钮

使用css样式制作的漂亮按钮

不言
不言asal
2018-06-21 17:17:201963semak imbas

这篇文章主要介绍了关于使用css样式制作的漂亮按钮，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

css样式制作的按钮，很漂亮，值得收藏，在下文贴出具体的实现css，喜欢的朋友可以研究下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Demo: CSS3 Buttons</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; 
} 
p { 
padding: 20px 0; 
border-bottom: solid 1px #ccc; 
} 
/* button 
---------------------------------------------- */ 
.button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*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; 
} 
/* color styles 
---------------------------------------------- */ 
/* 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=&#39;#666666&#39;, endColorstr=&#39;#000000&#39;); 
} 
.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=&#39;#444444&#39;, endColorstr=&#39;#000000&#39;); 
} 
.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=&#39;#000000&#39;, endColorstr=&#39;#666666&#39;); 
} 
/* 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=&#39;#888888&#39;, endColorstr=&#39;#575757&#39;); 
} 
.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=&#39;#757575&#39;, endColorstr=&#39;#4b4b4b&#39;); 
} 
.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=&#39;#575757&#39;, endColorstr=&#39;#888888&#39;); 
} 
/* 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=&#39;#ffffff&#39;, endColorstr=&#39;#ededed&#39;); 
} 
.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=&#39;#ffffff&#39;, endColorstr=&#39;#dcdcdc&#39;); 
} 
.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=&#39;#ededed&#39;, endColorstr=&#39;#ffffff&#39;); 
} 
/* 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=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;); 
} 
.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=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;); 
} 
.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=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;); 
} 
/* 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=&#39;#ed1c24&#39;, endColorstr=&#39;#aa1317&#39;); 
} 
.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=&#39;#c9151b&#39;, endColorstr=&#39;#a11115&#39;); 
} 
.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=&#39;#aa1317&#39;, endColorstr=&#39;#ed1c24&#39;); 
} 
/* 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=&#39;#00adee&#39;, endColorstr=&#39;#0078a5&#39;); 
} 
.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=&#39;#0095cc&#39;, endColorstr=&#39;#00678e&#39;); 
} 
.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=&#39;#0078a5&#39;, endColorstr=&#39;#00adee&#39;); 
} 
/* 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=&#39;#f16c7c&#39;, endColorstr=&#39;#bf404f&#39;); 
} 
.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=&#39;#cf5d6a&#39;, endColorstr=&#39;#a53845&#39;); 
} 
.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=&#39;#bf404f&#39;, endColorstr=&#39;#f16c7c&#39;); 
} 
/* 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=&#39;#7db72f&#39;, endColorstr=&#39;#4e7d0e&#39;); 
} 
.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=&#39;#6b9d28&#39;, endColorstr=&#39;#436b0c&#39;); 
} 
.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=&#39;#4e7d0e&#39;, endColorstr=&#39;#7db72f&#39;); 
} 
/* 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=&#39;#feb1d3&#39;, endColorstr=&#39;#f171ab&#39;); 
} 
.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=&#39;#f4aacb&#39;, endColorstr=&#39;#e86ca4&#39;); 
} 
.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=&#39;#f171ab&#39;, endColorstr=&#39;#feb1d3&#39;); 
} 
</style> 
</head> 
<body> 
<h1><a href="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3 Gradient Buttons</a></h1> 
<p><em>by</em> <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p> 
<p> 
<a href="#" class="button black">Rectangle</a> or 
<a href="#" class="button black bigrounded">Rounded</a> Can be 
<a href="#" class="button black medium">Medium</a> or 
<a href="#" class="button black small">Small</a> 
<input class="button black" type="button" value="Input Element" /> 
<button class="button black">Button Tag</button> 
<span class="button black">Span</span> 
<p class="button black">p</p> 
<p class="button black">P Tag</p> 
<h3 class="button black">H3</h3> 
</p> 
<p> 
<a href="#" class="button gray">Gray</a> 
<a href="#" class="button gray bigrounded">Rounded</a> 
<a href="#" class="button gray medium">Medium</a> 
<a href="#" class="button gray small">Small</a> 
<input class="button gray" type="button" value="Input Element" /> 
<button class="button gray">Button Tag</button> 
<span class="button gray">Span</span> 
<p class="button gray">p</p> 
<p class="button gray">P Tag</p> 
<h3 class="button gray">H3</h3> 
</p> 
<p> 
<a href="#" class="button white">White</a> 
<a href="#" class="button white bigrounded">Rounded</a> 
<a href="#" class="button white medium">Medium</a> 
<a href="#" class="button white small">Small</a> 
<input class="button white" type="button" value="Input Element" /> 
<button class="button white">Button Tag</button> 
<span class="button white">Span</span> 
<p class="button white">p</p> 
<p class="button white">P Tag</p> 
<h3 class="button white">H3</h3> 
</p> 
<p> 
<a href="#" class="button orange">Orange</a> 
<a href="#" class="button orange bigrounded">Rounded</a> 
<a href="#" class="button orange medium">Medium</a> 
<a href="#" class="button orange small">Small</a> 
<input class="button orange" type="button" value="Input Element" /> 
<button class="button orange">Button Tag</button> 
<span class="button orange">Span</span> 
<p class="button orange">p</p> 
<p class="button orange">P Tag</p> 
<h3 class="button orange">H3</h3> 
</p> 
<p> 
<a href="#" class="button red">Red</a> 
<a href="#" class="button red bigrounded">Rounded</a> 
<a href="#" class="button red medium">Medium</a> 
<a href="#" class="button red small">Small</a> 
<input class="button red" type="button" value="Input Element" /> 
<button class="button red">Button Tag</button> 
<span class="button red">Span</span> 
<p class="button red">p</p> 
<p class="button red">P Tag</p> 
<h3 class="button red">H3</h3> 
</p> 
<p> 
<a href="#" class="button blue">Blue</a> 
<a href="#" class="button blue bigrounded">Rounded</a> 
<a href="#" class="button blue medium">Medium</a> 
<a href="#" class="button blue small">Small</a> 
<input class="button blue" type="button" value="Input Element" /> 
<button class="button blue">Button Tag</button> 
<span class="button blue">Span</span> 
<p class="button blue">p</p> 
<p class="button blue">P Tag</p> 
<h3 class="button blue">H3</h3> 
</p> 
<p> 
<a href="#" class="button rosy">Rosy</a> 
<a href="#" class="button rosy bigrounded">Rounded</a> 
<a href="#" class="button rosy medium">Medium</a> 
<a href="#" class="button rosy small">Small</a> 
<input class="button rosy" type="button" value="Input Element" /> 
<button class="button rosy">Button Tag</button> 
<span class="button rosy">Span</span> 
<p class="button rosy">p</p> 
<p class="button rosy">P Tag</p> 
<h3 class="button rosy">H3</h3> 
</p> 
<p> 
<a href="#" class="button green">Green</a> 
<a href="#" class="button green bigrounded">Rounded</a> 
<a href="#" class="button green medium">Medium</a> 
<a href="#" class="button green small">Small</a> 
<input class="button green" type="button" value="Input Element" /> 
<button class="button green">Button Tag</button> 
<span class="button green">Span</span> 
<p class="button green">p</p> 
<p class="button green">P Tag</p> 
<h3 class="button green">H3</h3> 
</p> 
<p> 
<a href="#" class="button pink">Pink</a> 
<a href="#" class="button pink bigrounded">Rounded</a> 
<a href="#" class="button pink medium">Medium</a> 
<a href="#" class="button pink small">Small</a> 
<input class="button pink" type="button" value="Input Element" /> 
<button class="button pink">Button Tag</button> 
<span class="button pink">Span</span> 
<p class="button pink">p</p> 
<p class="button pink">P Tag</p> 
<h3 class="button pink">H3</h3> 
</p> 
</body> 
</html>


以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

div仿checkbox表单样式的美化和功能

如何使用css sprites把很多小图放在在一张图片上

Atas ialah kandungan terperinci 使用css样式制作的漂亮按钮. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：div仿checkbox表单样式的美化和功能Artikel seterusnya：利用css3仿造window7的开始菜单

Artikel berkaitan

Lihat lagi