シンプルなホバーボタン

1　シンプルなホバーボタン

ホバーしてね !

2　ソース

HTMLの記述

<button class="btn">ホバーしてね !</button>

※「ホバーしてね !」の部分は適宜変更

CSSの記述

* { 
--point:#769164;
--haikei:#f6faee;
} /*変数の設定 */
button .btn{ /* ボタンのスタイル */
  position:relative;
  height:60px; /* ボタンの高さ */
  background-color:var(--point); 
  color:var(--haikei); /* 変数適用 */
  border:none; /* ボーダー無し */
  font-size:1.6em; /* 文字サイズ */
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all; /* 変化に要する時間 */
  outline:none; /* 輪郭無し */
}
button .btn:hover{ /* ホバー時のスタイル */
  background-color:var(--haikei); /* 変数適用 */
  color:var(--point);  /* 変数適用 */
}
button .btn::before, button .btn::after{ /* ボタンの前と後の共通スタイル */
  content:''; /* 要素を消去 */
  position:absolute;
  top:0; right:0;
  height:2px; width:0;
  background-color:var(--point);  /* 変数適用 */
  transition:400ms ease all; /* 変化に要する時間 */
}
button .btn::after{ /* ボタンの後のスタイル */
  right:inherit;  top:inherit; /* 右、上位置は親要素の値を引き継ぐ*/
  left:0; bottom:0; /* 左,下位置は0 */
}
button .btn:hover::before, button .btn:hover::after{ /* ホバーの前と後の共通スタイル */
  width:100%;
  transition:800ms ease all; /* 変化に要する時間 */
}

変数の色名は、適宜変更 → 変数はこの記事全体に適用されます。