【HTML・CSS】ボタンの考え方

レスポンシブに対応し、かつCMSで入力しても崩れないボタンを作ることがよくあります。
その考え方・作り方についてまとめて見ました。

デモ

See the Pen botann by hiyohina (@hiyohina) on CodePen.

解説

HTML

こちらは私がストックしているボタン用のHTMLです。
いくつか試してみて、aタグをdivタグで囲んでおくと使い勝手が良いです。
（何か足したり、減らした時も崩れにくいです。）

<div class='btn'>
    <a href='＃＃＃＃＃'>ボタン</a>
</div>

注意点としては、aタグに基本CSSを追記して行きます。
理由は、class=’btn’にpadding等を追記しても、ホバー時などに動きがつかないからです。（設定することできますが、コードが長くなって美しくないので、基本はしないです。）

SCSS

次に、私が書き留めている中で一番シンプルなボタンのSCSSについて紹介させていただきます。
こちら、案件によっては必要なかったり書き足しが必要な場合もあるので必要に応じて変えて使ってるものです。

.btn {
  a {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 1em 2em;
    width: 300px;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    border:1px solid #000;
    transition: 0.3s;
    &::after {
      content: '';
      width: 5px;
      height: 5px;
      border-top: 3px solid #333333;
      border-right: 3px solid #333333;
      transform: rotate(45deg);
    }
    &:hover {
      opacity:.7;
    }
  }
}

まず一つ目、ボタンで一番大切なのは、マウスを載せた時になんらかの動きをつけておくことです。
これはhoverに設定を必ず加えます。
少し透過したり、アニメーションなどで動きがついているのが、通常だと思います。

次に二つ目に大切なのは、その変化の時間transformの設定をします。初期設定のままだと、パタパタ切り替わるので、少し格好がつかないです。なので、ゆっくり変化するようにこちらを記述します。

また、案件によってはボタンに矢印つけたり、つけなかったりします。
それがアイコンだったりする場合もあるので、そのストックもしています。

おすすめボタンについてのサイト

かなりの数が揃っていて、お手本にするのにおすすめのサイトです。

CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！

CSSで作れるボタンについて120個以上サンプルを作成してみました。どこよりも詳しく、どこよりもサンプル多く解説しています。どれもHTMLとCSSで実現できるものであり、PC用ボタンはすべてホバーアクション付きです。また、CSSボタンを作る際の重要なポイントについても解説しています。

jajaaan.co.jp

コピペで簡単ジェネレーターです。
こちら急ぎの時や簡単なボタンとかに使用させていただいています。他にもいろいろなサイトがあるので、参考にしたりしていくのが良いと思います。

CSSボタンデザインジェネレーター

コピペで簡単！HTMLとCSSだけで作るボタン作成ジェネレーターです。完成後のボタンデザインを見ながら簡単調整♪HTML、CSSを出力します。

generator.web-alpha.info