個別記事のページです

2014年11月26日(水)
このエントリーをはてなブックマークに追加

デザインが苦手でもCSSなら3ステップでボタンが作れる

ホームページでよくある「くわしくはこちら」などのボタンを用意する時、
PhotoshopやIllustratorなど画像編集ソフトを使って作成すると思います。

Illustratorで作成したボタンの例

しかし画像でボタンを作成した場合、今後ボタンの色を緑から紫に変えたい、
大きさも変えたいし中の文字も変えたいとなると、何か変更する度に
画像編集ソフトを立ち上げて修正して、画像を保存しなおす必要があります。


そんな煩わしさを解消できる上に、デザイン素人でもCSSを使って
簡単にボタンの作成、変更ができる方法がありますのでご紹介します。


CSSだけでここまで出来る!イラレ顔負けの機能たち
 先にご覧になりますとこれからの手順がより分かりやすいと思います
※今回はGoogleChromeで見た時に表示されるCSSで説明しています


まずはボタンにしたい土台を用意

ボタンにしたい土台

まずはhtmlでボタンにしたいリンクタグを設置します。

<div class="dl"><a href="dl.html">無料ダウンロード</a></div>


次に、リンクタグがボタンとして押せるようにCSSで四角形にしていきます。

div .dl {
width: 250px;
background: #00cc33;
}


div .dl a {
display: block;
font-size: 20px;
font-weight: bold;
padding: 20px 40px;
color: #fff;
text-align: center;
text-decoration: none;
}

でもこれだけだと、まだボタンだと分かりにくいですね。


ボタンの角を丸くする

ボックス要素の角を丸くする

次にボタンらしさを出すために、端っこの角を丸くします。


CSSではdiv.dlを以下のようにしました。少し、ボタンっぽくなってきました。

div .dl {
width: 250px;
background: #00cc33;
-webkit-border-radius:5px;  ←追加したCSS
}


ボタンの色をグラデーションにする

更に「押せる」感じを出すために、ボタンの色をグラデーションにします。

ボックス要素の背景色をグラデーションにする

CSSではdiv.dlを以下のようにしました。これだけでも、かなりボタンっぽくなりました!

div .dl {
width: 250px;
background:-webkit-linear-gradient(#C5E021, #00CC33);  ←変更したCSS
-webkit-border-radius:5px;
}


ボタンに影を付ける

最後にボタンに影を付けてより立体的に仕上げます。

ボックス要素にドロップシャドウを付ける

CSSではdiv.dlを以下のようにしました。

div .dl {
width: 250px;
background:-webkit-linear-gradient(#C5E021, #00CC33);
-webkit-border-radius:5px;
-webkit-box-shadow:#999 0 4px 5px;  ←追加したCSS
}

ボタン完成まで3ステップ!
角をもっと丸くしたいなど修正したい時もらくらくです。



実はFireFoxのダウンロードページでも同じCSSの技法が使われています。

FireFoxのダウンロードボタン

Firefoxダウンロードページ
https://www.mozilla.org/ja/firefox/new/



ホームページに沢山ボタンを設置したい、でもいちいち画像で作るのは面倒!
などなどお悩みのユーザー様、是非お試しください。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ