リンクをボタンにする

CSSでボタンを作ってみます。ボタンが作れればナビゲーションも割と簡単に作れるようになります。

まず、普通にリンクテキスト同じCSSを作ります。

.button01 a {
      color: c00;
      font-weight: bold;
}

次に装飾のための設定

.button01 a {
      background: #ddd;
      color: #c00;
      font-weight: bold;
      border: 1px solid #c00;
}

これだけでは、背景色が付いてテキストの周りにボーダーが付いているだけなので、widthとheightを追加してテキストをtext-align: center;でセンターに持ってくる。heightはautoにしてテキストの大きさに自動で合わせるようにしておけば、楽チンです。しかし、widthは、ちゃんと値を入れておかないと横幅全てをリンク領域にしてしまうので注意。

 .button01 a {
      background: #ddd;
      width: 150px;
      height: auto;
      color: #c00;
      font-weight: bold;
      border: 1px solid #c00;
      text-align: center;
}

このままでは、テキスト部分がインライン要素のままなのでdisplay: block;にしてブロック要素に変更。後は、paddingでテキストの位置を若干調整して、お好みでmarginを使って位置を調整すれば完了です。

.button01 a {
      background: #ddd;
      width: 150px;
      height: auto;
      margin: 5px;
      padding: 4px 0;
      color: #c00;
      font-weight: bold;
      border: 1px solid #c00;
      text-align: center;
      display: block;
}

<p class="button01"><a href=&qout;http://source-marine.net">Source Marine</a></p>

Source Marine

おもしろリンクアクション

リンクに要素の位置を指定するpositionプロパティを組み合せてロールオーバーした時にテキストを少し動かしてボタンを押したようなアクションを作ってみます。

リンクのboxを作ってその中のリンクに対してこの効果を有効にするようにします。

まずは、基本設定

.link-box a:link  {
      color: #600;
      position: relative;
}

.link-box a:visited {
      color: #600;
}

※position: relative;はロールオーバー時にテキストを動かす基準にするために指定しておきます。

次ににロールオーバー時のアクションを追加

.link-box a:hover {
      color: #00f;
      text-decoration: none;
      top: 1px;
      left: 0;
}

このままではIEが正常に動作してくれないので、heightプロパティとmarginプロパティを追加します。

.link-box a:link {
      color: #f00;
      height: auto;/*point*/
      position: relative;
}

.link-box a:hover {
      color: #00f;
      margin: auto; /*point*/
      text-decoration: none;
      top: 1px;
      left: 0;
}

<div class="link-box">
<p>ホームページ制作なら<a href="http://source-marine.net">ソースマリン</a></p>
</div>