CSS 버튼-누름 버튼 사용법
Pushy Buttons 라이브러리는 작은 CSS Pressable Buttons 라이브러리입니다.
bttn.css로드
pushy-buttons.min.css 라이브러리를로드하려면 github 에서 CSS를 다운로드 하고 웹 페이지의 <head> 섹션에 다음 줄을 붙여 넣습니다.
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>버튼 사용
html 버튼 태그를 사용하여 버튼을 만들고 크기 지정자 btn-lg와 함께 스타일 btn, btn-blue를 추가합니다.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--blue">Submit</button>
</body>
</html>다음과 같은 출력이 생성됩니다.
크기 정의
CSS를 사용하여 크기를 정의하고 아래와 같이 클래스 이름과 함께 사용하여 버튼의 크기를 늘리거나 줄일 수 있습니다. 주어진 예에서 우리는 네 가지 크기를 변경했습니다.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--blue">Large</button>
<button class = "btn btn--df btn--blue">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
<button class = "btn btn--sm btn--blue">Small</button>
</body>
</html>다음과 같은 출력이 생성됩니다.
색상 정의
크기와 마찬가지로 CSS를 사용하여 버튼의 색상을 정의 할 수 있습니다. 다음 예제는 버튼의 색상을 변경하는 방법을 보여줍니다.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--red">Large</button>
<button class = "btn btn--df btn--green">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
</body>
</html>다음과 같은 출력이 생성됩니다.