簡単かつ軽い！アニメーション付きCSSボタンが作れる「Bttn.css」

2017年1月30日

Webサイトには、作り手としてクリックを促したいボタンがいくつもありますよね。
特に、ショッピングサイトにおいては「購入ボタン」が押されなければ意味がありませんし、動画配信サイトにおいては「再生ボタン」をいかに目立たせてクリックを促すかが重要です。

クリックを促すために、ボタンデザインにおいて気をつけるべきポイントはいくつかあります。たとえば、ボタン上の表記を分かりやすくする、とか、押しやすいサイズで作成をする、ページ内で明るく目立つ色を選ぶ、などなど。

また、最近ではボタンを画像で作成するのではなく、CSSでおしゃれで動きのあるボタンを作成するのも当たり前になってきました。CSSでボタンを作成することで、圧倒的にファイルサイズを軽くし、かつ様々なエフェクトを柔軟に適用することもできるようになったのです。

今日は、そんなCSSで簡単にボタンが作れる「Bttn.css」というサイトを本日はご紹介します。

「Bttn.css」の使い方

「Bttn.css」にアクセスをすると、おしゃれなCSSボタンがデモ表示されています。色とサイズは、サイト内で変更ができます。それぞれのボタンには、ホバーアニメーションもかかっているので、マウスをあわせて動きもチェックしましょう。

気に入ったボタンがあったら、サイト上部にある「Download」ボタンからCSSファイルをダウンロードします。たった4KBしかない軽さが大きな魅力ですね。

あとは、使いたいボタンのid, classを指定するだけで、簡単にボタンに適用ができます。

使用する際は、ライセンスのページもご確認ください。

ボタンの見た目がおしゃれだったり、ホバーアニメーションが効果的だと、それだけでクリック率が上がってWebサイトの成果が変わるかもしれません！ぜひ、「Bttn.css」を使ってCSSで作るボタンの魅力に触れてみてくださいね！！