【ボタンパーツ】「リンク枠線ボタン」作成コードコピー【html/scss/css】

こんにちは、カヨ（@matuge_kirin）です。

【自己紹介】
SEとしてお仕事しています
コーディング中の部品やブロックごとのフォーマットメモを記録
自分用ですがぜひよかったら使ってください

「ボタン作りたい」のでコピぺコード
少し解説
1. 【HTML】
2. 【SCSS・CSS】
改善点
環境メモ

「ボタン作りたい」のでコピぺコード

使う人は以下をまるっとコピペで表示されるのでどうぞ！

See the Pen btn（枠内リンク） by kayo (@kayokayo) on CodePen.

少し解説

ファイルごとに見ていくと…
※こっちの方がコピーしやすいかも

【HTML】

<div>
  <div class="m-auto">
    <div class="text-center my-5">
      <a href="" class="bl__btn-rec-border el__ho-link">リンクテキスト</a>
    </div>
  </div>
</div>

✔︎ボタンを中央寄せしてるのは「m-auto」

上記はBootstrap 4.2でクラスというのでつけている。
cssでつけるなら「margin: auto;」

✔︎ボタンの上に矢印のせた反応するのは「el__ho-link」

cssで「//リンクホバー」の直下を記述できたら
「el__ho-link」クラスをつけてあげるだけで押そうとしたらうっすら白く反応してくれるよ。

✔︎ボタンの上に矢印のせた反応するのは「bl__btn-rec-border」

cssで「//ボタンの見た目」の直下を記述できたら
「bl__btn-rec-border」をつけて線や線と文字の間幅（ボタンサイズ）が決まるよ。

【SCSS・CSS】

Bootstrapの記述は不要であれば消してください。

/*ブートストラップ  ----- */
//ボタン中央寄せ
.m-auto {
  margin: auto;
}
.text-center {
  text-align: center;
 }
/*ブートストラップ------end */

// リンクホバー
.el__ho-link:hover {
    opacity: 0.6;
}

//ボタンの見た目
.bl__btn-rec-border {
    color: #4d4136;
    border: 1px solid #4d4136;

    display: inline-block;
    padding: .7em 1em;
    min-width: 250px;
    text-decoration: none;
}

✔︎要素は横並びにしたいけど、横幅・高さや余白を調整したい

「display: inline-block;」をつけることで
aタグのインライン要素で余白がつけられなかったのをつけられるようにしている。