개요

구현

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

  .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;/*ボタンを押すと線が消える*/
    }
  }

구현 결과

버튼: 정지 이미지

버튼：동영상

감상

참고