【マークアップ 】デザインボタン

概要

ボタンに少しデザインを付けることで、サイトがカッコ良くなる〜
と思い実装しました！

今回紹介するのは、立体的に見えて押し込み式のボタンとなります

実装

views/index.html.haml

.btn
  .new__dispaly--commit
  = f.submit "Submit", class:"commit-btn"

index.scss

  .btn {
    input.commit-btn {
      display: inline-block;
      position: relative;
      padding: 0.5em 1.4em;
      text-decoration: none;
      background: #1d4d8b;/*ボタン色*/
      color: $white;
      border-bottom: solid 5px #123158;/*ボタンの下　色*/
      border-right: solid 5px #5375bd;/*ボタンの右　色*/
    }
    input.commit-btn:before {
      content: " ";
      position: absolute;
      bottom: -5px;
      left: -1px;
      width: 0;
      height: 0;
      border-width: 0 6px 6px 0px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: $white;
      }
    input.commit-btn:after {
      content: " ";
      position: absolute;
      top: -1px;
      right: -5px;
      width: 0;
      height: 0;
      border-width: 0px 6px 6px 0px;
      border-style: solid;
      border-color: white;
      border-bottom-color: transparent;
    }
    input.commit-btn:active {
      /*ボタンを押したとき*/
      border:none;
      -webkit-transform: translate(6px,6px);
      transform: translate(6px,6px);
    }
    input.commit-btn:active:after, input.commit-btnt:active:before {
      content: none;/*ボタンを押すと線が消える*/
    }
  }

実装結果

ボタン：静止画像

ボタン：動画　

※Gyazoで撮影していますので、タイミングによっては見れないかもしれません

感想

HamlとScssで簡単実装できました！
皆様もぜひ活用してください

参考