ホバーするとしずむ立体的ボタンのCSS

こんにちは。今日はボタンにまつわるCSSについて書こうと思います。

イメージはこちら↓

少し見えにくいのですがボタン下部に色の濃い部分があり、ホバーするとボタンが沈み込み、影が消えるという仕様です！

今回のCSSはボタンの色味に関わらず使いまわせるので便利です＾＾
ではさっそくコードを見ていきましょう〜！

コード

HTML編

                    <div class="m-btn01"><a href="#">詳しく見る</a></div>

CSS編

.m-btn01 {
  font-weight: bold;
  text-align: center;
  color: #fff;
  line-height: 1.4;
}

.m-btn01 a {
  position: relative;
  text-decoration: none;
  background-color: #0068b7;
  box-sizing: border-box;
  border-radius: 5px;

  overflow: hidden; /*ポイント*/
  vertical-align: top; /*ホバー時のブレ挙動対応*/
}

.m-btn01 a:before {
  position: absolute;
  top: 50%;
  content: "";
  transform: translateY(-50%) scaleY(1.2) rotate(45deg);
  width: .4em;
  height: .4em;
  border: solid #fff;
}

.m-btn01 a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 5px;
  opacity: .2;
  pointer-events: none; /*ホバー時のブレ挙動対応*/
  background-color: #000;
}

@media only screen and (min-width: 769px), print {
  .m-btn01 {
    font-size: 2.4rem;
  }
  .m-btn01 a {
    display: inline-block;
    min-width: 600px;
    padding: 25px 45px;
  }
  .m-btn01 a:hover {
 　　　　　　overflow: visible; /*ホバー時のブレ挙動対応*/
    transform: translateY(5px);
  }
  .m-btn01 a:hover:after {
    bottom: 100%; /*ホバー時のブレ挙動対応*/
　　　　　　　　pointer-events: auto; /*ホバー時のブレ挙動対応*/
　　　　　　　　opacity: 0; /*ホバー時のブレ挙動対応*/
  }
  .m-btn01 a:before {
    right: 25px;
    border-width: 3px 3px 0 0;
  }
}

今回も実務を想定してPC用としてコーディングしています。

少し説明しますね。
擬似要素beforeの方で白矢印をつくり、afterで影部分をつくっています。（今回は矢印の説明は割愛します。）

ポイントをあげると、

です＾＾

いかがでしょうか？
これなら使い回しも効くので参考になれば幸いです。では今日はここまで〜〜