W3.CSS 버튼
W3.CSS 버튼 클래스
W3.CSS는 버튼에 대해 다음 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3-btn | 그림자 호버 효과가 있는 직사각형 버튼. 기본 색상은 검정색입니다. |
| w3 버튼 |
회색 호버 효과가 있는 직사각형 버튼. 기본 색상은 W3.CSS 버전 3의 밝은 회색입니다. 기본 색상은 버전 4의 상위 요소에서 상속됩니다. |
| w3-바 |
버튼을 함께 그룹화하는 데 사용할 수 있는 가로 막대입니다. (가로 탐색 메뉴에 적합) |
| w3 블록 | 전체 너비(100%) 버튼을 정의하는 데 사용할 수 있는 클래스입니다. |
| w3-원 | 원형 버튼을 정의하는 데 사용할 수 있습니다. |
| w3 리플 | 파급 효과를 만드는 데 사용할 수 있습니다. |
버튼
w3-button 클래스와 w3-btn 클래스는 모두 HTML 요소에 버튼 동작을 추가합니다.
사용하는 가장 일반적인 요소는 <input type="button">, <button> 및 <a>입니다.
예시
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
버튼 색상
모든 w3- 색상 클래스는 버튼에 색상을 추가하는 데 사용됩니다.
예시
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
호버 색상
호버 효과도 모든 색상으로 제공됩니다. 다음은 몇 가지입니다.
w3- hover- color 클래스는 버튼에 호버 색상을 추가하는 데 사용됩니다 .
예시
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
버튼 모양
w3- round- size 클래스는 버튼에 둥근 테두리를 추가하는 데 사용됩니다 .
예시
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</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>
버튼 크기
w3- size 클래스를 사용하여 다양한 텍스트 크기를 정의할 수 있습니다 .
예시
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
버튼 테두리
w3-border 클래스는 버튼에 테두리를 추가하는 데 사용할 수 있습니다 .
w3-border- color 클래스는 테두리 색상을 정의하는 데 사용됩니다 .
예시
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
팁: 둥근 테두리를 추가하려면 w3- round- size 클래스를 추가하십시오.
다른 텍스트 효과가 있는 버튼
버튼은 더 넓은 텍스트 효과를 사용할 수 있습니다.
w3-wide 클래스는 더 넓은 텍스트 효과를 추가합니다.
예시
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
버튼은 기울임꼴 및 굵은 텍스트 효과를 가질 수 있습니다.
표준 HTML 태그(<i> 및 <b>)를 사용하여 버튼 텍스트에 기울임꼴 또는 굵게 효과를 추가합니다.
예시
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
패딩이 있는 버튼
w3-padding- size 클래스는 버튼 텍스트 주위에 추가 패딩을 추가하는 데 사용됩니다 .
예시
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
전체 너비 버튼
전체 너비 버튼을 만들려면 버튼에 w3-block 클래스를 추가합니다.
전체 너비 버튼의 너비는 100%이며 상위 요소의 전체 너비에 걸쳐 있습니다.
예시
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
팁: 버튼 텍스트를 w3-left-align 클래스 또는 w3-right-align 클래스와 정렬하십시오.
style="width:" 를 사용하여 블록의 크기를 정의할 수 있습니다 .
예시
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
비활성화된 버튼
버튼은 그림자 효과로 눈에 띄며 마우스를 올리면 커서가 손 모양으로 바뀝니다.
비활성화된 버튼은 불투명하고(반투명) "주차 금지 표지판"을 표시합니다.
w3-disabled 클래스는 비활성화 된 버튼을 만드는 데 사용됩니다(요소가 표준 HTML 비활성화된 속성을 지원하는 경우 비활성화된 속성을 대신 사용할 수 있음).
예시
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
버튼 바
버튼은 w3-bar 클래스 를 사용하여 수평 막대로 그룹화할 수 있습니다 .
예시
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
w3-bar 클래스는 W3.CSS 버전 2.93 / 2.94에서 도입되었습니다.
w3-bar-item 클래스 를 사용하여 버튼 사이에 공백 없이 함께 그룹화할 수 있습니다 .
예시
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
버튼 막대는 w3-center 클래스를 사용하여 중앙에 배치할 수 있습니다.
예시
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
같은 줄에 두 개 이상의 버튼 막대를 표시하려면 w3-show-inline-block 클래스 를 추가하십시오.
예시
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
탐색 모음
버튼 모음은 탐색 모음으로 쉽게 사용할 수 있습니다.
예시
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
각 항목의 크기는 style="width:" 를 사용하여 정의할 수 있습니다 .
예시
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
이 자습서의 뒷부분에서 탐색에 대해 자세히 알아볼 것입니다.
왼쪽 및 오른쪽 버튼
버튼을 왼쪽이나 오른쪽으로 띄우려면 .w3-left 클래스와 .w3-right 클래스를 사용 하세요.
"이전/다음" 버튼을 만드는 데 사용:
예시
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
파급 효과가 있는 버튼
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>