[css]borderを２重にしたデザインのボタンを作ってみよう

今回は、borderを２重にしたデザインのボタンを作ってみようと思います。
外側のborderと内側のborderを引くためのブロックを作るだけですので非常に簡単です。htmlもcssも非常にシンプルですので、ぜひ覚えていってください。
あなたのブログがよりスタイリッシュになりますよ。

HTMLの構造

HTMLのご紹介を指定と思います。HTMLは非常にシンプルに外側のborderと内側のborderを作るためのブロックを作成しましょう。beforeなどの要素を使っても記述できますが、今回はわかりやすくシンプルに行こうと思います。

<div class="out_border">
 <div class="in_border">Read more</div>
</div>

サンプル実装例

上述のようにhtmlを作ってみましょう。

CSSのご紹介

上述のHTMLのままだと味気ないですので、まずはout_borderを使ってボタンっぽいデザインにしてみましょう。今回はborderを使いますので、borderを使ったボタンにしてみましょう。

<style>
 .out_border{
   width:200px;
   text-align:center;
   border:1px solid #000;
   background:#eee;
   padding:5px;
  }
</style>
<div class="out_border">
 <div class="in_border">Read more</div>
</div>

サンプル実装例

ここにさらに内側のborderを入れていきましょう。次にin_borderのクラスにcssを当てていきます。さらに、out_borderのpaddingの上述では５pxにしてデザインを整えていましたが、内側のin_borderでpaddingを入れることでデザインをよりいいものにしていきます。
２重のborderの間隔はout_borderのpaddingで調整できます。

<style>
 .out_border{
   width:200px;
   text-align:center;
   border:1px solid #000;
   background:#eee;
   padding:2px;//borderの隙間の調整
   margin-bottom:30px;
  }
 .in_border{
   border:1px solid #000;
    padding-top:5px;
    padding-bottom:5px;
  }
</style>
<div class="out_border">
 <div class="in_border">Read more</div>
</div>