の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

      2016/02/01

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを作ってみました。

ほぼ、個人用です。コピペする場合は各自の環境に合わせて改変してください。

CSSボタンデザイン

ボタンの形

枠だけでもいいかな?と思ったのですが、アフォードしそうなので、ボタン下部のみ影を入れてます。

ボタンの色

よく使うグレー、ブルー。それにリーチする色ともっぱら噂のオレンジ、グリーンを加えて4色展開です。

コード

上記を踏まえたCSSは次のとおり。

.btn {
 font-size : 16px;
 text-align:center;
 font-weight:bold;
 color     : #fff;
 width     : 100px;
 padding   : 10px 0;
 margin    : 10px auto;
 cursor    : pointer;
 border-radius: 5px;
}

.grey{
 background: #95a5a6;
 box-shadow: 0 4px 0 #7f8c8d;
}

.green{
 background: #2ecc71;
 box-shadow: 0 4px 0 #27ae60;
}

.orange{
 background: #e67e22;
 box-shadow: 0 4px 0 #d35400;
}

.blue{
 background: #3498db;
 box-shadow: 0 4px 0 #2980b9;
}

まとめ

自分用にCSSのボタンデザインをまとめみました。

しばらくは、このデザインで

 - JS,PHP,CSS

336-280

  関連記事

no image
CSSに関する超個人的なメモ

CSSに関する個人的なメモです。 何回も確認したり、よく使うコードをメモしておき …

no image
【JavaScript】functionでリロードする方法

用途 ボタンをクリックしたらリロードしたい、ある一定時間が経過したらWebページ …

段組
【CSS】段組レイアウトの基礎・サンプル付き

CSSによる段組レイアウトの基礎とサンプルです。 段組レイアウトサンプル サンプ …

【CSS】paddingとmarginの違いまとめ

paddingとmarginの違いについてまとめます。 概要 要素:文字列「サン …

解像度
Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度を調べる方法

商標登録するイメージファイルを作る必要がありjpgファイルにdpiを指定すること …