[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート

GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。

CSS3 GitHub Buttons

[ad#ad-2]

下記は各ポイントを意訳したものです。
デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。

• デモページ（当方日本語化）

• 普通のボタン
• 注意を促すボタン
• 大きいボタン
• グループ化したボタン
• グループ化したものをまとめたボタン
• アイコンを伴ったボタン
• 対応ブラウザ
• ライセンス

普通のボタン

普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。
ボタンを作るためには、「class="button"」を加えるだけです。

デモページ（当方日本語化）

<a href="#" class="button">Post comment</a>
<input class="button" type="submit" value="Post comment (input)">
<button class="button" type="submit">Post comment (button)</button>

ボタンを錠剤状にするには、「class="pill"」を更に加えます。

デモページ（当方日本語化）

<a href="#" class="button pill">This is a pill button</a>

重要なボタンにはそれを強調するために、「class="primary"」を更に加えます。

デモページ（当方日本語化）

<a href="#" class="button primary">Publish post</a>

注意を促すボタン

ボタンのアクション時に注意が必要なもの、例えばデータを消去するなど、は「class="danger"」を加えることで明示できるでしょう。

デモページ（当方日本語化）

<a href="#" class="button danger">Delete post</a>

大きいボタン

特定のアクションを強調する際は、「class="big"」を加えることで目立たせることができます。

デモページ（当方日本語化）

<a href="#" class="button big">Create Project</a>

グループ化したボタン

ボタンをグループ化する場合もあるでしょう。「class="button-group"」を使用することで、これも簡単に実装できます。

デモページ（当方日本語化）

<div class="button-group">
    <a href="#" class="button primary">Dashboard</a>
    <a href="#" class="button">Inbox</a>
    <a href="#" class="button">Account</a>
    <a href="#" class="button">Logout</a>
</div>

もちろん強調だけでなく、錠剤状のデザインも適用できます。

デモページ（当方日本語化）

<ul class="button-group">
    <li><a href="#" class="button primary pill">Dashboard</a></li>
    <li><a href="#" class="button pill">Inbox</a></li>
    <li><a href="#" class="button pill">Account</a></li>
    <li><a href="#" class="button pill">Logout</a></li>
</ul>

あまり重要ではないグループには、「class="minor-group"」を加えることで境界線を引くことができます。

デモページ（当方日本語化）

<div class="button-group minor-group">…</div>

グループ化したものをまとめたボタン

ツールバーのようにグループ化したものをまとめたボタンが必要な場合は、グループ化したボタンを「class="button-container"」でまとめることができます。

デモページ（当方日本語化）

<div class="actions button-container">
    <a href="#" class="button primary">Compose new</a>
    
    <div class="button-group">
        <a href="#" class="button primary">Archive</a>
        <a href="#" class="button">Report spam</a>
        <a href="#" class="button danger">Delete</a>
    </div>
                        
    <div class="button-group minor-group">
        <a href="#" class="button">Move to</a>
        <a href="#" class="button">Labels</a>
    </div>
</div>

アイコンを伴ったボタン

最後は、さまざまなアイコンをclass名を変更するだけで利用できるスタイルです。

デモページ（当方日本語化）

<a href="#" class="button icon search">Search</a>

アイコンはさまざまなものを用意されています。

デモページ（当方日本語化）

対応ブラウザ

対応ブラウザは下記の通りです。

• Firefox 3.5+
• Google Chrome
• Safari 4+
• IE 8+
• Opera 10+

いくつかのCSS3の機能がIE8とOperaでサポートされません。また、アイコンはIE6/7でサポートされません。

ライセンス

利用にあたっては個人でも商用でも無料で、ライセンスは「Public domain: http://unlicense.org/」です。

[ad#ad-2]