CSS 버튼-Beautons 사용법

Beautons 버튼 라이브러리는 버튼을 만들기위한 간단한 CSS 툴킷입니다. 스타일, 크기의 조합을 적용하여 일관되고 견고하며 견고한 버튼 세트를 만들 수 있습니다.

Beautons로드

Beautons 라이브러리를로드하려면 github 에서 CSS를 다운로드 하고 웹 페이지의 <head> 섹션에 다음 줄을 붙여 넣습니다.

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

버튼 사용

html 버튼 태그를 사용하여 버튼을 만들고 스타일을 추가합니다. btn.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

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

크기 정의

CSS를 사용하여 크기를 정의하고 아래와 같이 클래스 이름과 함께 사용하여 버튼의 크기를 늘리거나 줄일 수 있습니다. 주어진 예에서 우리는 네 가지 크기를 변경했습니다.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

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

글꼴 크기 정의

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

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

기능 버튼 정의

다음 예는 다양한 기능 버튼을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

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

스타일 결합

다음 예제는 버튼의 스타일을 결합하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

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

ㅏ 단락에서.