w3.css
버튼
W3.CSS 버튼 클래스
W3.CSS는 버튼에 대해 다음 클래스를 제공한다.
| Class | Defines |
|---|---|
| w3-btn | 그림자 호버 효과가 있는 직사각형 버튼이다. 기본 색상은 검정색이다. |
| w3-button | 회색 호버 효과가 있는 직사각형 버튼이다. 기본 색상은 W3.CSS 버전 3에서 밝은 회색이다. 기본 색상은 버전 4의 상위 요소에서 상속된다. |
| w3-bar | 버튼을 그룹화하는 데 사용할 수 있는 가로 막대다. (수평 탐색 메뉴에 적합하다) |
| w3-block | 전체 너비(100%) 버튼을 정의하는 데 사용할 수 있는 클래스다. |
| w3-circle | 원형 버튼을 정의하는 데 사용할 수 있다. |
| w3-ripple | 파급 효과를 만드는 데 사용할 수 있다. |
버튼
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- color 클래스는 버튼에 색상을 추가하는 데 사용된다.
예제
<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 클래스에 맞춰 정렬한다.
a 블록의 크기는 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>
파급 효과가 있는 버튼
w3-ripple 클래스는 버튼을 클릭할 때 버튼에 파급 효과를 만든다.
예제
<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>
모든 요소는 버튼이 될 수 있다
W3.CSS를 사용하면 모든 요소가 버튼이 될 수 있다.
그림은 w3-button이 될 수 있다.
사진은 w3-btn일 수 있다.
모든 div, 머리글, 바닥글 또는 기타 컨테이너는 w3-btn이 될 수 있다 !
원형 버튼
w3-circle 클래스를 사용하여 원형 버튼을 만들 수 있다.
예제
<button class="w3-button w3-circle w3-black">+</button> <button class="w3-button w3-circle w3-teal">+</button>
정사각형 버튼
예제
<button class="w3-button w3-black">+</button> <button class="w3-button w3-teal">+</button>
참고
