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

« 前の記事

次の記事 »