の まとめ

デジタルガジェットレビュー、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

  関連記事

素のHTML5ファイルを作成する

明日は大晦日。 新しい年に向けて、HTMLファイルをたくさん作る人もいるでしょう …

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

ここではJavaScriptでランダムな値を生成する方法を紹介します。 用途 1 …

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

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

paiza.IO を使ってみた

IT/WEBエンジニア向けの転職サービス会社paiza(パイザ)が提供するpai …

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズ …