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

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

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

  2. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  3. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

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

    CSS

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

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

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

    CSS

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

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

  6. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP