各種ボタンの記述

2024年5月18日

WEBサイトを作成する上で必ずといっていいほど、ボタンがあります。
ボタンの場合、ある程度パターン化されているので、スニペットを作成しました。

タイトルのみのボタン　

①背景色のないボタン

<div class="contact-btn">
    <a href="#"> お問い合わせ</a>
</div>

.contact-btn {
    display: block;
    width: 200px;
    line-height: 56px;
    background: #ffffff;
    text-align: center;
    border: 1px solid;
    border-color: #707070;
  
 }

➁背景色のあるボタン

<div class="contact-btn">
    <a href="#"> お問い合わせ</a>
</div>

.contact-btn{
    display: block;
    width:200px;
    line-height: 56px;
    color: #171717;
    background-color: #F7D43F;
    text-align: center;
    border: 1px solid;
    border-color: #707070;
    border-radius: 30px;
  }

③背景がグラデーションのボタン

<div class="contact-btn">
    <a href="#"> お問い合わせ</a>
</div>

.contact-btn{
    display:block;
    width:200px;
    line-height: 56px;
    color: #ffffff;
    background:linear-gradient(to right,#FA41CC,#6020B0);
    text-align: center;
    border: 1px solid;
    border-color: #707070;
    border-radius: 10px;
  
  }

タイトルのみのボタンでした。高さ指定はline-height でできます。高さからフォントサイズをひき、それを
２で割った余白を上下padding で設定するより簡単です。しかし、line-heightのみで指定した場合、将来的にタイトルが２行になる場合や右にアイコンを付ける場合などに対応できないなど、拡張性がない問題があります。しかし、問い合わせ画面に遷移するためのボタンでしたら、まずそのようなことは考えされないので、問題ないかと思います。

右に矢印のあるボタン

①HTML

<div class="common-btn">
    <p class="btn-title">お問い合わせ</p>
    <div class="btn-allow">
      <img src="images/btn-allow.png" alt="">
    </div>
</div>

➁CSS

  .common-btn {
    max-width: 282px;
    width: 100%;
    background-color: #40603d;
    display: flex;
    border-radius: 8px;
  }

  .btn-title {
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-top: 22px;
    margin-bottom: 22px;
    margin-left: 70px;
  }

  .btn-allow {
    height: 32px;
    width: 32px;
    margin-top: 18px;
    margin-bottom: 22px;
    margin-left: 20px;
  }

タイトル、矢印のアイコンにそれぞれmarginで余白をとっています　

よかったらシェアしてね！