HTMLとCSSのみで作れるボタン集 (only CSS. No javascript! No images!)

with only CSS. No javascript! No images!

ということで
CSSのみで作成できるインタラクティブなボタンデザインをまとめたサイトを作成しました。

HTMLとCSSのみで作れるボタン集 | cssButtons
source(github)

個人的に使いやすいと思ったものや面白いものをまとめてます。
デザインやアニメーションは全てCSSのみで実装しているものです。

IEの古いバージョンにはほとんど対応していないです。。。

使い方

ボタンをクリックするとそのボタンのHTMLとCSSが表示されます

コードをコピペするだけで使えるようになってます。

CSSは以下の様なスタイルをベースとして設定してあります。ボタンのサイズや色の有無などは各自で変更をお願いします。

.button {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
}
.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button,
.button::before,
.button::after {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

その他

今後もボタンを追加していく予定です。
表示崩れ等のバグがあった場合は連絡いただければ対応します。

一人だと追加していくのに限界があるのでコミッター大募集です。
よろしくお願いします。
github

追記

2016-03-17　CSSのコードをコピーできるボタンを実装。