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>

다음과 같은 출력이 생성됩니다.