【CSS】 세련된 디자인의 버튼을 Bttn.css로 실현하는 【라이브러리】
공식 사이트
Bttn.css1. 다운로드
사이트 톱에 갑자기 "Download"버튼이 있습니다.
이것을 잡아 CSS 파일을 다운로드합니다. 이것만으로 OK 
Github Repo 버튼은 Github에 대한 링크입니다. 이번에는 사용하지 않습니다.
2. 설치
다운로드한 파일을 간단하게 link 태그로 정의하기만 하면 됩니다.
<link rel="stylesheet" href="./bttn.min.css">
3. 사용해보기
13 종류의 스타일과 6 종류의 색이 정의되어 있습니다.
사이즈도 4종류이므로, 그 조합은 312가지 
3-1. 색상 선택
시작 부분의 "Download"버튼 아래에 6 색 원이 있습니다.
제일 오른쪽은 굉장히 보기 어렵지만 백색입니다.
이 6색을 사용할 수 있는 색으로, 포치포치하면 색이 바뀌어 시뮬레이션할 수 있습니다.
그리고 각 색상의 이름은 다음과 같습니다 
칼라
클래스 이름
블루
bttn-primary
노랑
bttn-warning
레드
bttn-danger
녹색
bttn-success
보라색
bttn-royal
화이트
bttn-default
3-2. 사이즈 선택
준비되어 있는 사이즈는 다음의 4개 
사이즈
클래스 이름
극소
bttn-xs
작은
bttn-sm
중간
bttn-md
큰
bttn-lg
옆에 나란히 비교해 보면, 이런 느낌.
※왼쪽부터 순서대로, 극소/소/중/대
극소 사이즈는 조금 누르기 어렵다고 합니다 
스마트 폰이라고 최저라도 중 사이즈 정도입니까.
3-3. 모양을 선택
13종류 준비되어 있는 가운데, 이번은 Simple을 사용해 보겠습니다.
무슨 일이야. 지금까지 선택한 색상과 크기, 모양을 클래스로 지정하기 만하면됩니다.
<button class="bttn-simple bttn-md bttn-primary">bttn.css</button>
순식간에, 청색&중 사이즈&Simple 스타일의 버튼이 생겼습니다! 
4. 이렇게 필요 없어
13종류도 형태가 있는 것은, 선택사항이 풍부하고 고맙습니다만, 실제로 13종류 전부 사용하는가 하면, 그렇지 않다···.
특정의 1개 2개 정도만입니다.
그런 때는, 필요한 스타일만 들어간 CSS를 다운로드하면 됩니다 
각 스타일을 마우스 오버하면 클라우드
표시가 떠오릅니다.
이 클라우드 마크를 클릭하면 (위 그림에서) Simple 스타일의 CSS만 다운로드할 수 있습니다.
최초로 다운로드한 「전부들이」가 33KB인데 대해, 스타일 1개만이라면 5KB 전후로, 꽤 경량화됩니다.
4-1. 작은 CSS를 사용해 보았습니다.
방금 Simple을 사용했기 때문에, 이번에는 Float를 DL 해 보았습니다.
<html lang="ja">
<head>
<link rel="stylesheet" href="./float.css"> /* DLしたスタイル指定のCSS */
</head>
<body>
<button class="bttn-float bttn-md bttn-primary">bttn.css</button>
</body>
</html>
완성 
읽는 CSS를 바꿀 뿐이므로 사용법은 동일합니다.
요약
이런 라이브러리는 「전부 들어가」인 것이 많은 생각이 들고, 스타일 마다 DL 할 수 있는 것은 그다지 본 적이 없습니다.
그리고 단순한 것부터 조금 정교한 것까지, 형태의 바리에이션이 풍부
꼭 사용해 보세요—.
Reference
이 문제에 관하여(【CSS】 세련된 디자인의 버튼을 Bttn.css로 실현하는 【라이브러리】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mtanabe/items/34e6a2af509ab446d86b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
다운로드한 파일을 간단하게 link 태그로 정의하기만 하면 됩니다.
<link rel="stylesheet" href="./bttn.min.css">
3. 사용해보기
13 종류의 스타일과 6 종류의 색이 정의되어 있습니다.
사이즈도 4종류이므로, 그 조합은 312가지
3-1. 색상 선택
시작 부분의 "Download"버튼 아래에 6 색 원이 있습니다.
제일 오른쪽은 굉장히 보기 어렵지만 백색입니다.
이 6색을 사용할 수 있는 색으로, 포치포치하면 색이 바뀌어 시뮬레이션할 수 있습니다.
그리고 각 색상의 이름은 다음과 같습니다
칼라
클래스 이름
블루
bttn-primary
노랑
bttn-warning
레드
bttn-danger
녹색
bttn-success
보라색
bttn-royal
화이트
bttn-default
3-2. 사이즈 선택
준비되어 있는 사이즈는 다음의 4개
사이즈
클래스 이름
극소
bttn-xs
작은
bttn-sm
중간
bttn-md
큰
bttn-lg
옆에 나란히 비교해 보면, 이런 느낌.
※왼쪽부터 순서대로, 극소/소/중/대
극소 사이즈는 조금 누르기 어렵다고 합니다
스마트 폰이라고 최저라도 중 사이즈 정도입니까.
3-3. 모양을 선택
13종류 준비되어 있는 가운데, 이번은 Simple을 사용해 보겠습니다.
무슨 일이야. 지금까지 선택한 색상과 크기, 모양을 클래스로 지정하기 만하면됩니다.
<button class="bttn-simple bttn-md bttn-primary">bttn.css</button>
순식간에, 청색&중 사이즈&Simple 스타일의 버튼이 생겼습니다!
4. 이렇게 필요 없어
13종류도 형태가 있는 것은, 선택사항이 풍부하고 고맙습니다만, 실제로 13종류 전부 사용하는가 하면, 그렇지 않다···.
특정의 1개 2개 정도만입니다.
그런 때는, 필요한 스타일만 들어간 CSS를 다운로드하면 됩니다
각 스타일을 마우스 오버하면 클라우드 표시가 떠오릅니다.
이 클라우드 마크를 클릭하면 (위 그림에서) Simple 스타일의 CSS만 다운로드할 수 있습니다.
최초로 다운로드한 「전부들이」가 33KB인데 대해, 스타일 1개만이라면 5KB 전후로, 꽤 경량화됩니다.
4-1. 작은 CSS를 사용해 보았습니다.
방금 Simple을 사용했기 때문에, 이번에는 Float를 DL 해 보았습니다.
<html lang="ja">
<head>
<link rel="stylesheet" href="./float.css"> /* DLしたスタイル指定のCSS */
</head>
<body>
<button class="bttn-float bttn-md bttn-primary">bttn.css</button>
</body>
</html>
완성
읽는 CSS를 바꿀 뿐이므로 사용법은 동일합니다.
요약
이런 라이브러리는 「전부 들어가」인 것이 많은 생각이 들고, 스타일 마다 DL 할 수 있는 것은 그다지 본 적이 없습니다.
그리고 단순한 것부터 조금 정교한 것까지, 형태의 바리에이션이 풍부
꼭 사용해 보세요—.
Reference
이 문제에 관하여(【CSS】 세련된 디자인의 버튼을 Bttn.css로 실현하는 【라이브러리】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mtanabe/items/34e6a2af509ab446d86b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<button class="bttn-simple bttn-md bttn-primary">bttn.css</button>
13종류도 형태가 있는 것은, 선택사항이 풍부하고 고맙습니다만, 실제로 13종류 전부 사용하는가 하면, 그렇지 않다···.
특정의 1개 2개 정도만입니다.
그런 때는, 필요한 스타일만 들어간 CSS를 다운로드하면 됩니다
각 스타일을 마우스 오버하면 클라우드
표시가 떠오릅니다.이 클라우드 마크를 클릭하면 (위 그림에서) Simple 스타일의 CSS만 다운로드할 수 있습니다.
최초로 다운로드한 「전부들이」가 33KB인데 대해, 스타일 1개만이라면 5KB 전후로, 꽤 경량화됩니다.
4-1. 작은 CSS를 사용해 보았습니다.
방금 Simple을 사용했기 때문에, 이번에는 Float를 DL 해 보았습니다.
<html lang="ja">
<head>
<link rel="stylesheet" href="./float.css"> /* DLしたスタイル指定のCSS */
</head>
<body>
<button class="bttn-float bttn-md bttn-primary">bttn.css</button>
</body>
</html>
완성
읽는 CSS를 바꿀 뿐이므로 사용법은 동일합니다.
요약
이런 라이브러리는 「전부 들어가」인 것이 많은 생각이 들고, 스타일 마다 DL 할 수 있는 것은 그다지 본 적이 없습니다.
그리고 단순한 것부터 조금 정교한 것까지, 형태의 바리에이션이 풍부
꼭 사용해 보세요—.
Reference
이 문제에 관하여(【CSS】 세련된 디자인의 버튼을 Bttn.css로 실현하는 【라이브러리】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mtanabe/items/34e6a2af509ab446d86b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【CSS】 세련된 디자인의 버튼을 Bttn.css로 실현하는 【라이브러리】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mtanabe/items/34e6a2af509ab446d86b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
