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);
}

関連記事

  1. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  2. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  3. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  4. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  5. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  6. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

コメント

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

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

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP