CSS 버튼-퀵 가이드

웹 페이지의 버튼은 사용자가 필요한 입력을 선택하거나 입력 한 후 클릭하고 필요한 정보를 얻기 위해 세부 정보를 제출하는 주요 행위자입니다. 이 튜토리얼은 버튼을 멋지게 만드는 10 가지 주요 CSS 라이브러리에 초점을 맞추고 있습니다.

bttn.css− bttn.css 라이브러리는 버튼에 대한 간단한 스타일의 방대한 컬렉션을 제공합니다. 이 라이브러리는 개인 및 상업용으로 완전히 무료입니다. 이 버튼은 쉽게 사용자 정의 할 수 있습니다.
Pushy Buttons − Pushy Buttons 라이브러리는 작은 CSS Pressable Buttons 라이브러리입니다.
btns.css − btns.css 버튼 라이브러리는 부드러운 전환을 사용하는 CSS 버튼 세트입니다.
Social Buttons − Social Buttons 라이브러리는 순수 CSS로 만든 CSS 버튼 세트이며 Bootstrap 및 Font Awesome을 기반으로합니다.
Beautons− Beautons 버튼 라이브러리는 버튼 생성을위한 간단한 CSS 툴킷입니다. 스타일, 크기의 조합을 적용하여 일관되고 견고하며 견고한 버튼 세트를 만들 수 있습니다.

bttn.css 라이브러리는 버튼에 대한 간단한 스타일의 방대한 컬렉션을 제공합니다. 이 라이브러리는 개인 및 상업용으로 완전히 무료입니다. 이 버튼은 쉽게 사용자 정의 할 수 있습니다.

bttn.css로드

btns.css 라이브러리를로드하려면, 링크로 이동 btns.css 및 웹 페이지의 <head> 섹션에 다음 줄을 붙여 넣습니다.

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

버튼 사용

html 버튼 태그를 사용하여 버튼을 만들고 크기 지정자 bttn-lg와 함께 스타일 bttn-slant, bttn-royal을 추가합니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

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

크기 정의

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

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

색상 정의

크기와 마찬가지로 CSS를 사용하여 버튼의 색상을 정의 할 수 있습니다. 다음 예제는 버튼의 색상을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

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

다음은 bttn.css에서 사용할 수있는 다양한 스타일입니다.

Sr. No.	스타일	중간 사이즈	원색
1	bttn-slant	bttn-md	bttn- 기본
2	bttn-unite	bttn-md	bttn- 기본
삼	bttn 알약	bttn-md	bttn- 기본
4	bttn-float	bttn-md	bttn- 기본
5	bttn 소재 플랫	bttn-md	bttn- 기본
6	bttn 재료 원	bttn-md	bttn- 기본
7	bttn 채우기 원	bttn-md	bttn- 기본
8	bttn 그라데이션	bttn-md	bttn- 기본
9	bttn-jelly	bttn-md	bttn- 기본
10	bttn-stretch	bttn-md	bttn- 기본
11	bttn- 최소	bttn-md	bttn- 기본
12	bttn 테두리	bttn-md	bttn- 기본
13	bttn-simple	bttn-md	bttn- 기본

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>

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

크기 정의

<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>

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

btns.css 버튼 라이브러리는 부드러운 전환을 사용하는 CSS 버튼 세트입니다.

bttn.css로드

btns.css 라이브러리를로드하려면, 링크로 이동 btns.css 및 웹 페이지의 <head> 섹션에 다음 줄을 붙여 넣습니다.

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

버튼 사용

html 버튼 태그를 사용하여 버튼을 만들고 크기 지정자 btn-lg를 사용하여 btn, btn-blue 스타일을 추가합니다.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

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

크기 정의

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">Small</button>
   </body>
</html>

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

색상 정의

크기와 마찬가지로 CSS를 사용하여 버튼의 색상을 정의 할 수 있습니다. 다음 예제는 버튼의 색상을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

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

스타일 정의

크기, 색상과 마찬가지로 CSS를 사용하여 버튼의 스타일을 정의 할 수 있습니다. 다음 예제는 버튼의 스타일을 변경하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

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

Social Buttons 라이브러리는 순수 CSS로 만든 CSS 버튼 세트이며 Bootstrap 및 Font Awesome을 기반으로합니다.

소셜 버튼로드

bootstrap-social.css 라이브러리를로드하려면 github 에서 bootstrap-social.css를 다운로드 하고 웹 페이지의 <head> 섹션에 다음 행을 붙여 넣으십시오.

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

버튼 사용

html 앵커 태그를 사용하여 버튼을 만들고 소셜 지정자 btn-social을 사용하여 btn, btn-block 스타일을 추가합니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Twitter로 로그인

크기 정의

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Twitter로 로그인 Twitter로 로그인 Twitter로 로그인 Twitter로 로그인

아이콘 만 사용

다음 예제는 아이콘 전용 버튼을 선택하는 방법을 보여줍니다.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

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

다음은 소셜 버튼에서 사용할 수있는 다양한 스타일입니다.

Sr. 아니.	스타일	중간 사이즈	단추
1	btn- 트위터	btn-md	Twitter로 로그인
2	btn-bitbucket	btn-md	Bitbucket으로 로그인
삼	btn-dropbox	btn-md	Dropbox로 로그인
4	btn- 페이스 북	btn-md	Facebook으로 로그인
5	btn-btn-flickr	btn-md	Flickr로 로그인
6	btn-btn-foursquare	btn-md	Foursquare로 로그인
7	btn-btn-github	btn-md	Github로 로그인
8	btn-btn-google	btn-md	Google로 로그인
9	btn-btn- 인스 타 그램	btn-md	Instagram으로 로그인
10	btn-btn-linkedin	btn-md	Linkedin으로 로그인
11	btn-btn-microsoft	btn-md	Microsoft로 로그인
12	btn-btn-odnoklassniki	btn-md	Odnoklassniki로 로그인
13	btn-btn-openid	btn-md	Openid로 로그인
14	btn-btn-pinterest	btn-md	Pinterest로 로그인
15	btn-btn-reddit	btn-md	Reddit으로 로그인
16	btn-btn- 사운드 클라우드	btn-md	Soundcloud로 로그인
17	btn-btn-tumblr	btn-md	Tumblr로 로그인
18	btn-btn- 트위터	btn-md	Twitter로 로그인
19	btn-btn-vimeo	btn-md	Vimeo로 로그인
20	btn-btn-vk	btn-md	Vk로 로그인
21	btn-btn-yahoo	btn-md	Yahoo로 로그인

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>

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

크기 정의

<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>

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

ㅏ 단락에서.