狼読

 
2020/04/28

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

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

HTMLの構造

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

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

サンプル実装例

Read more

上述のように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>

サンプル実装例

Read more

ここにさらに内側のborderを入れていきましょう。次にin_borderのクラスにcssを当てていきます。さらに、out_borderのpaddingの上述では5pxにしてデザインを整えていましたが、内側のin_borderでpaddingを入れることでデザインをよりいいものにしていきます。
2重の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>

サンプル実装例(2重ボーターのボタン)

Read more

非常にシンプルですが、スタイリッシュなボタンができましたね。

まとめ

今回は、2重ボーターを使ったボタンの作り方をご紹介させていただきました。作り方は非常に簡単ですが、線を2重に引くだけでかっこいいボタンになりますね。ぜひ活用してみてください。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/07/17

Macのストレージ(空き容量)を正しく確実に確保!ストレージ 「その他」圧迫の原因と解消方法

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読