【CSS】おしゃれなデザインのボタンをPress.cssで実現する【ライブラリ】

普通に、ごくごく普通にHTMLでボタンを作ろうとすると、buttonタグかinputタグのbuttonタイプを使いますが・・・。
素のHTMLだと、こんな感じで:arrow_down:味気ない！
![01_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/b119b525-a443-2a5b-e9ea-da294f27befd.png)

そこで、フリーのライブラリ「[Press.css](https://press-css.io)」を使って、おしゃれにしてみます :lipstick: 
公式サイト:link:[Press.css](https://press-css.io)

# 1.ダウンロード

[Press.cssの公式サイト](https://press-css.io)の下の方に、ダウンロードリンクがあります。
「CSS File」のボタンです。「Source Files」はGithubへのリンクになります。
![02_080.png](https://qiita-image-store.s3.amazonaws.com/0/188980/6cc28645-381b-6749-fa5f-f95c299a837a.png)

# 2.インストール

複雑なことはありません。ただ、linkタグで定義するだけです。

```HTML
<link rel="stylesheet" href="./press-2.0.8.css">
```
たったこれだけで、全てのデザインが使用可能です:ok_woman:
[Github](https://github.com/codyogden/press-css)からソースコードをダウンロードしてくれば、自由に改造して色の追加とかできますが、今回はやりません。

# 3.使ってみた

Press.cssを適用させたいbuttonタグやinputタグに、`press`と`press-[色名]`のclassを指定するだけです。
色名は、標準で21色が使えます（めっちゃ多い上にキレイ:sparkles:）。
ひとまず、buttonタグにblueを、inputタグにorangeを適用してみます。

```HTML
<!-- buttonタグの場合 -->
<button class="press press-blue">BUTTON</button>
<!-- inputタグの場合 -->
<input type="button" value="INPUT" class="press press-orange" />
```
適用結果はこちら:point_down:うん、いい感じ:exclamation:
![03_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/f83725c8-bed4-86e3-9772-a83b6cf3679c.png)
しかも、active時・hover時でちょっと色が変わります:point_down:
![04_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/147950fe-2cdc-8c00-e749-6f6d742cabf4.png)
`press`と`press-[color]`のclassを指定するだけで、超お手軽におしゃれなボタンになりました。

# 4.ちょっと変化させてみる
## 4-1.サイズを変えてみる
デフォルトのサイズに対して、smallとlarge、XLがあります。
![05-100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/766e078f-8895-5928-d6cf-5f451f9417ad.png)

```HTML
<!-- 左から順に -->
<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.形を変えてみる
上記で紹介した直角の角をもつデザインは、デフォルトのものです。
他に、角がまるいもの、両端が丸くなっているもの、正円のものがあります。
![06_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/9c24a954-42af-f8bf-ebe3-5b138587efe7.png)

```HTML
<!-- 左から順に -->
<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>
```
両端が円いものは、薬:pill:に似ているということで、`press-pill`というクラス名になっています。
丸いものは、いいねボタンとかお気に入り追加ボタンとかで使えそうです:thumbsup:
「B!」って書いたら、なんかBing!検索みたいになっちゃった・・・。

## 4-3.エフェクトをつけてみる
デフォルトのボタンも十分おしゃれなんですが、ちょっとだけエフェクトが付けられます。
なぜ「ちょっとだけ」かというと、[Google's Material Design](https://design.google) guidelinesに則った設計になっているそうで、出来るだけ軽量かつフラット＆マテリアライズ的に保持できるから・・・だそうです。
![07_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/3af7d0c3-f363-3365-e745-4be1716d5be1.png)

```HTML
<!-- 上から順に -->
<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で指定できるものが２つだけ！
`press-raised`と`press-ghost`です。
`disabled`は既存のCSSセレクタを利用しています。
ものすごくSimple is the bestです。

# まとめ
ものすごくシンプルで、しかもファイルサイズ3KBと超軽量！
なのに、Press.cssだけでTwitterとかFacebookのボタンが再現できるくらいにおしゃれ:sparkles:
簡単なサンプルモックを作る時に使えそうな気がします。

デザイナーさんじゃないので、自力でここまで作るのがちょっと・・・という時に、ぜひ使ってみてください。