個別記事のページです

2015年5月14日(木)
このエントリーをはてなブックマークに追加

CSSで背景を複数設定する方法を使ったボタンのデザイン

CSS3を使うと角丸や影を反映できるだけでなく、
divなどのブロック要素に対して2つ以上背景画像を設定する事ができます。

今回は背景を複数設定する方法を使い、シンプルな
ボタンっぽいデザインが簡単にできる方法をご紹介します。

まずはボタンの土台を用意


html

<div class="botan">
<a href="next.html">かっこいいバイクが欲しい!<br>詳しくはこちら</a>
</div>


CSS

.botan a {
text-decoration:none;
display:block;
padding: 7px;
background: rgb(250,250,250);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#EAEAEA',GradientType=0 );

box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
border-radius: 6px;
font-weight:bold;
text-align:center;
}


とりあえずボタンらしきものが完成。
ボタンの土台を作成

背景を複数設定する方法でボタンの左右に画像を置く

更に背景画像を設定するCSSを追加します。

CSS

.botan a {
background-image:
url("img/common/img_right.png"),
url("img/common/img_left.png"),
linear-gradient(to bottom, rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);

background-repeat:
no-repeat,
no-repeat,
repeat;

background-position:
97% center,
1% center;
}



今回は左右にイラストを置いてボタンっぽくしてみました。
ボタン作成
CSSの補足をしますと、「background-image」は背景画像の設定、
「background-repeat」は背景画像を繰り返し表示させるかの有無、
「background-position」で背景画像の位置を調整しています。

CSSでは通常下に書いていったものほど優先して適用されますが、
複数背景画像を設定する方法では先に記述したものが上に表示されます。

つまり今回のデザイン例では
① img_right.png(ヘルメットのイラスト)
② img_left.png(バイクのイラスト)
③ 背景色グラデーション
の順番で重なっているということになります。

ちなみに以下のように背景色の設定が一番上になると
画像が表示されなくなるので、順番には注意が必要です。
画像の順番を間違えた例

同じようなデザインでボタンを量産したい時は、
新しい画像を用意してhtmlとCSSをコピー&ペーストするだけなので、
IllustratorやPhotoshopで作成して書き出すよりもお手軽です!
ボタンを複製した
書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ