버튼
W3.CSS으로, 모든 HTML 요소 단추가 될 수 있습니다.
그러나 가장 일반적인 요소는 <입력>, <버튼> 및 <A> 있습니다 :
예
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3ii.com">Link Button</a> »그에게 자신을보십시오 버튼 색상
버튼은 당신이 필요로하는 모든 색상에 와서 :
예
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn
w3-yellow">Yellow</button>
<button class="w3-btn
w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button> »그에게 자신을보십시오 호버 색상
당신이 필요로하는 모든 색상에 와서 효과를 가져 :
예
<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn
w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button> »그에게 자신을보십시오 버튼 모양
버튼은 당신이 필요로하는 모든 형태가 :
예
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-round">Round</button>
<button class="w3-btn
w3-round-large">Rounder</button>
<button class="w3-btn
w3-round-xlarge">and Rounder</button>
<button class="w3-btn
w3-round-xxlarge">and Rounder</button>
»그에게 자신을보십시오 버튼 크기
버튼은 당신이 필요로하는 모든 크기에 와서 :
예
<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn
w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
»그에게 자신을보십시오 버튼 테두리
버튼 국경을 가질 수 있습니다.
예
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue
w3-round">Button</button>
»그에게 자신을보십시오 텍스트 효과와 버튼
버튼 기울임 꼴 및 굵게 효과를 가질 수있다.
예
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
»그에게 자신을보십시오 버튼 그림자 텍스트 효과를 가질 수 있습니다.
예
<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button
class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button
class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
»그에게 자신을보십시오 버튼 슬림하고 다양한 텍스트 효과를 가질 수 있습니다.
예
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
»그에게 자신을보십시오 전체 폭 버튼
전체 폭 버튼을 만들려면 요소로 W3-btn을 블록 클래스를 추가 할 수 있습니다.
전폭 버튼 100 %의 폭을 갖고, 상기 부모 구성 요소의 전체 폭에 걸쳐 :
예
<button class="w3-btn-block">Button</button>
<button class="w3-btn-block
w3-teal">Button</button>
<button class="w3-btn-block
w3-red w3-left-align">Button</button> »그에게 자신을보십시오 호버 효과 / 사용 안 함 버튼
버튼 그들을 때 당신에게 마우스를 의미합니다.
일반 버튼을 손가락 포인터를 표시합니다.
장애인 버튼이 불투명하고 "더 주차 기호"를 표시하지 않습니다.
예
<button class="w3-btn">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
<input type="button"
class="w3-btn" value="Button">
<input type="button" class="w3-btn"
value="Button" disabled> »그에게 자신을보십시오 버튼 그룹
버튼은 "W3-btn을 그룹"을 사용하여 (사이 공백없이) 함께 그룹화 할 수 있습니다 :
예
<div class="w3-btn-group">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn"
disabled>Button</button>
</div>
<div
class="w3-btn-group">
<button class="w3-btn w3-light-grey"
style="width:33.3%">One</button>
<button class="w3-btn
w3-light-grey" style="width:33.3%">Two</button>
<button
class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
»그에게 자신을보십시오 파급 효과와 버튼
그들이에 클릭 할 때 버튼 파급 효과를 가질 수있다 :
예
<button class="w3-btn w3-ripple">Button</button>
<button
class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn
w3-ripple w3-yellow">Button</button>
»그에게 자신을보십시오 버튼 요소
W3.CSS으로, 모든 요소는 단추가 될 수 있습니다.
그림은 버튼 될 수 있습니다
모든 사업부, 머리글, 바닥 글 또는 기타 용기는 버튼 될 수 있습니다.
버튼 부동
W3-btn을 부동 클래스는 중요한 기능에 대한 의미하는 원형 버튼을 생성합니다 :
큰 부동 버튼의 W3-btn을-부동 큰 클래스를 사용 :
예
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
»그에게 자신을보십시오