CSSだけでインタラクティブなボタンを作る

HTMLとCSSだけで作成したインタラクティブなボタンをまとめたサイトを作成しました。

HTMLとCSSのみで作れるボタン集 | CSS Buttons

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

IEは10以降に対応しています。

使い方

使いたいボタンをクリックするとそのボタンのコードが表示されます。

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

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

.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.com