찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 스타일을 사용하여 만든 아름다운 버튼

CSS 스타일을 사용하여 만든 아름다운 버튼

不言
不言원래의
2018-06-21 17:17:201959검색

이 글은 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 모방 체크박스 양식 스타일 미화 및 기능

CSS 사용 방법 스프라이트는 한 장의 그림에 작은 그림을 여러 개 넣어줍니다

위 내용은 CSS 스타일을 사용하여 만든 아름다운 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：체크박스 양식 스타일을 모방한 div의 미화 및 기능다음 기사：체크박스 양식 스타일을 모방한 div의 미화 및 기능

관련 기사

더보기