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>

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

크기 정의

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>

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

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>

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

크기 정의

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

<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로 로그인

크기 정의

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

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

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

크기 정의

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>

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









글꼴 크기 정의

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

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

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







단락에서.