보통, 극히 보통으로 HTML로 버튼을 만들려고 하면, button 태그나 input 태그의 button 타입을 사용합니다만・・・.
기본 HTML이라면, 이런 느낌으로 맛이 없다!


그래서 무료 라이브러리 "Press.css"를 사용하여 세련되게 해 봅시다
공식 사이트 Press.css

1. 다운로드

Press.css의 공식 사이트 아래에 다운로드 링크가 있습니다.
「CSS File」의 버튼입니다. 'Source Files'는 Github에 대한 링크입니다.

2. 설치

복잡하지 않습니다. 그냥 링크 태그로 정의하면됩니다.

<link rel="stylesheet" href="./press-2.0.8.css">

단지 이것만으로 모든 디자인을 사용할 수 있습니다
Github에서 소스 코드를 다운로드하면 자유롭게 개조하여 색상을 추가하거나 할 수 있지만 이번에는하지 않습니다.

3. 사용해 보았다

Press.css를 적용하고 싶은 button 태그나 input 태그에 press 와 press-[色名] class를 지정하기만 하면 됩니다.
색상 이름은 표준으로 21 색을 사용할 수 있습니다 (엄청 많은 위에 깨끗 ).
일단 button 태그에 blue를, input 태그에 orange를 적용해 보겠습니다.

<!-- buttonタグの場合 -->
<button class="press press-blue">BUTTON</button>
<!-- inputタグの場合 -->
<input type="button" value="INPUT" class="press press-orange" />

적용 결과는 이쪽 응, 좋은 느낌

게다가, active시·hover시로 조금 색이 바뀝니다
press와 press-[color]의 클래스를 지정하는 것만으로 매우 간단하고 세련된 버튼이되었습니다.

4. 조금 변화시켜 본다

4-1. 사이즈를 바꾸어 본다

기본 크기에 대해 small과 large, XL이 있습니다.

<!-- 左から順に -->
<button class="press press-lime press-sm">BUTTON</button>
<button class="press press-lime">BUTTON</button>
<button class="press press-lime press-lg">BUTTON</button>
<button class="press press-lime press-xl">BUTTON</button>

개인적인 감각으로서는, 메일 문의의 버튼이라면press-lg이 딱 좋은 사이즈로 밀기 쉬운 것 같은 느낌입니다.

4-2. 모양을 바꾸어 본다

위에서 소개한 직각의 모서리를 가지는 디자인은, 디폴트의 것입니다.
그 밖에, 모서리가 가늘어지는 것, 양단이 둥글게 되어 있는 것, 정원의 것이 있습니다.

<!-- 左から順に -->
<button class="press press-purple">BUTTON</button>
<button class="press press-purple press-round">BUTTON</button>
<button class="press press-purple press-pill">BUTTON</button>
<button class="press press-purple press-circle">B!</button>

양쪽 끝이 둥근 것은 약과 닮았다고 하는 것으로, press-pill 라고 하는 클래스명이 되고 있습니다.
둥근 것은 좋아하는 버튼이나 좋아하는 추가 버튼 등으로 사용할 수있을 것 같습니다
「B!」라고 쓰면, 어쩐지 Bing! 검색같이 되어 버렸다···.

4-3. 이펙트를 붙여 본다

디폴트의 ​​버튼도 충분히 세련된입니다만, 조금 이펙트가 붙습니다.
왜 「조금만」인가라고 하면, Google's Material Design guidelines에 준거한 설계가 되고 있다고 하고, 가능한 한 경량 한편 플랫&머티리얼라이즈적으로 유지할 수 있으니까・・・라고 합니다.

<!-- 上から順に -->
<button class="press press-yellow">BUTTON</button>
<button class="press press-yellow press-raised">BUTTON</button>
<button class="press press-yellow press-ghost">BUTTON</button>
<button class="press press-yellow" disabled>BUTTON</button>

그런 「조금만」의 이펙트는, CSS로 지정할 수 있는 것이 2개만!press-raised 및 press-ghost입니다.disabled는 기존 CSS 선택기를 사용합니다.
굉장히 Simple is the best입니다.

요약

굉장히 심플하고, 게다가 파일 사이즈 3KB로 초경량!
그런데, Press.css만으로 Twitter나 Facebook의 버튼을 재현할 수 있을 정도로 세련된
간단한 샘플 모의를 만들 때 사용할 수있는 것 같은 느낌입니다.

디자이너 씨가 아니기 때문에, 자력으로 여기까지 만드는 것이 조금···라고 할 때, 꼭 사용해 보세요.