지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS 스타일을 사용하여 만든 아름다운 버튼

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

不言
풀어 주다： 2018-06-21 17:17:20
원래의
1954명이 탐색했습니다.

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
CSS 스타일 단추
원천：php.cn
이전 기사：체크박스 양식 스타일을 모방한 div의 미화 및 기능 다음 기사：css3을 사용하여 window7의 시작 메뉴 모방
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
9
1588
Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...
에서 2024-04-06 22:01:35
0
3
816
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿