コピペで使えるCSSボタンを紹介しているサイト3選

CSSボタンって、Webサイトのデザインで欠かせないパーツのひとつですよね。
でも、自分でゼロから作ろうとすると意外とCSSの知識が必要だったりします。

そこで今回は、コピペするだけで簡単に使えるCSSボタンを紹介している便利サイトを3つピックアップしました。
サイトにアクセスして、気に入ったボタンのCSSコードをコピーして貼り付ければ、あっという間にオシャレなボタンが作れます。

おすすめサイト

1. uiverse.io（旧：CSSButtons.io）

50種類以上のCSSボタンが掲載されています。
シンプルなものからアニメーション付きまで幅広く揃っているので、使いやすさ◎。

2. Pure CSS Buttons

120種類以上のCSSボタンを公開。
3Dやグラデーション、レトロ風など、デザインのバリエーションが豊富です。

3. JAJAAAN!

こちらも120種類以上のCSSボタンが掲載されています。
シンプルで汎用性の高いものから、ちょっと変わったユニークなボタンまで色々。

使い方

1. まずは紹介したサイトにアクセスして、好きなボタンのCSSコードをコピーします。
2. 自分のWebサイトのHTMLに、ボタンを表示したい位置へ以下のようなコードを貼り付けます。

<button class="ボタンのクラス名">ボタンのテキスト</button>

クラス名には、コピーしたCSSコードに書かれているクラス名を指定します。

例）CSSButtons.ioの「Primary Button」を使う場合

<button class="primary-button">ボタンのテキスト</button>

カスタマイズ

背景色やフォントサイズなど、CSSをちょっと変えれば簡単にアレンジできます。

.primary-button {
  background-color: #ff0000;
}

上記だと、背景色が赤になります。

まとめ

コピペで使えるCSSボタンサイトを活用すれば、短時間でクオリティの高いボタンが作れます。
まずはそのまま使ってみて、必要に応じて色や形をカスタマイズするのがおすすめです。