個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。
Photoshopなどを使った画像のボタンに比べて、圧倒的に使い勝手がよいCSS製ボタン。
CSSボタンを作成するには便利なジェネレーターがありますが、デザイン的にインパクトに欠けてしまうなんてことはないでしょうか。
そこで利用したいのが今回ご紹介するフリーで公開されているCSSボタンコレクションサイトです。
デザイン的にもクオリティーが高いので、現場でも利用できること間違いなし。
ユーザーが思わずクリックしたくなる演出が施されたボタンばかりです。
すぐれたCSSボタンを使ってコンバージョンをあげちゃいましょう。

CSSだけで作られた無料のボンタがコレクションされた「CSS Buttons」

CSS Buttonsは、CSSだけでつくれた無料のボタンがコレクションされているサイトです。
ノーマルなタイプのボタンから、ミニマルデザイン、フラット、3Dデザインといった、バラエティー豊かなボタンがコレクションされています。
もちろん、無料で利用できますよ。
記事掲載時点で61種類のボタンが公開されています。
たとえば、ホーバーエフェクトが目を引くソーシャルボタンや、

See the Pen Social buttons with hover by Marius Balaj (@mariusbalaj) on CodePen.

境界線部分がなんとも華やかな演出をするボタン、


波紋のように広がるボタン、


すぐに使える各種さまざまなボタンがひとまとめになった「Gradient Buttons」などなど。

See the Pen Cool Buttons by Felipe Marcos (@FelipeMarcos) on CodePen.

ユーザーが思わずクリックしたくなる演出が施されたボタンばかりです!
CSS Buttons

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス

記事を読む

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?

各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自

記事を読む

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む