CSSのみで画像のようなボタンを作成する

web

CSSのみで画像のようなボタンを作成する

画像を使わずにCSSで描画するメリット

レイアウトに画像を使用した場合、CSSで描写したものよりも重くなってしまいます。 スマホなど回線が弱い端末からの閲覧を考慮すると、画像使用は極力抑えるに越したことはありません。
また画像の修正は画像ダウンロード→画像編集ソフトで修正→再アップロードといった手順が必要で何かと手間です。

そこでグラデーションやシャドウなどを使って、CSSのみで画像のようなボタンを作ってみましょう。

見出しを装飾する

見出しを装飾してみましょう。HTMLは単純な見出しです。

<h1>見出し</h1>

単純に塗りたくるだけだとこんな感じでしょうか

h1{
  background-color:blue;
  color:white;
  width:120px;
  padding:4px 12px;
}
like-image-button01

グラデーション、角丸、テキストシャドウ、ボックスシャドウを使って装飾してみました。

h1{
  background:-webkit-gradient(linear,left top,left bottom,from(blue),to(navy));
  color:white;
  width:120px;
  padding:4px 12px;
  border-radius:4px;
  text-shadow:1px 1px 4px #000;
  box-shadow: 0px 0px 1px #000; 
}

単純に塗ったものに比べて立体感が出ています。

like-image-button02

リストを装飾する

続いてリストを装飾してみましょう。簡単なナビゲーションリストを想定します。

<ul>
  <li>ナビ1</li>
  <li>ナビ2</li>
  <li>ナビ3</li>
</ul>

まずは単純に塗りたくってみます

ul li{
  background-color:black;
  color:white;
  border-right:solid 1px #fff;
  padding:4px 8px;
  text-align:center;
  float:left;
}

なんだか野暮ったい感じのするナビゲーションですね・・・

like-image-button03

グラデーションとシャドウを使ってみます。

ul li{
  background:-webkit-gradient(linear,left top,left bottom,from(black),to(#585858));
  background:gradient(linear,left top,left bottom,from(black),to(#585858));
  color:white;
  border-right:solid 1px #fff;
  padding:4px 8px;
  text-align:center;
  float:left;
  box-shadow: 3px 3px 3px black; 
}

浮かび上がってる感が出ました。

like-image-button04

リンクを装飾する

リンクを装飾してみます。単純なリンクです。

<a href="#">リンク</a>

下線だけ消しておきます。

a{
  text-decoration:none;
}

普通のリンクですね。

like-image-button05

頭に三角形を付けてみましょう。

a{
  text-decoration:none;
  position:relative;
  padding-left:18px;
  margin: 24px 0;
}

a:before{
  content: "";
  top:2px;
  left:4px;
  position: absolute;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid blue;
}

俄然リンクらしくなりました。

like-image-button06

こんな感じで、CSSで表現できる箇所は極力CSSで記述してしまいましょう。 サイトの負荷を減らせるし、修正などの際にも効率的に作業できるようになります。

アマルウェブ HOME