CSS

CSS3でシンプルで簡単なボタンを作ってみる

CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSSだけで作れるって便利ですよね。IEはほとんど対応してないですけどそれはとりあえず置いときます。今回ボタンを作るにあたり意識したポイントは2点です。

[ads_center]

  • ボタンに奥行き感を出す
  • 文字をレタープレスっぽくする

ボタンに奥行き感を出すにはボックス上部を明るくしてボックス下部を暗くします。これにはbox-shadowのinsetを使いました。文字をレタープレスっぽくする場合はtext-shadowを使い、文字上部を暗くして文字下部を明るくします。以下ソースコードです。

#button {
	width: 170px;
	height: 50px;
	font-size: 18px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	color: #8a0047;
	background: #ef007c;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ef007c), color-stop(0.00, #ff5db1));
	background: -webkit-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -moz-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -o-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -ms-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	border-radius: 7px;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.9);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.6);
}

黄金比を自動計算してくれる便利なツール前のページ

Vimの基本的なコマンドの使い方を試してみた次のページ

関連記事

  1. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  2. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  3. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  4. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  5. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  6. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP