ホバーしたら背景が入ってくるボタン

ホバーしたら、背景が左から入ってきて、ホバーを外すと、背景が右に流れます。

1. ボタンウィジットのクラス名を「anime-btn」としておく

2. 以下のCSSを入れる

CSSコード

HTML

<style>
/* btn */
.anime-btn {
  position: relative;
  transition: all 0.5s;
	overflow:hidden;
	z-index:1;
}
.anime-btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #323232;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s;
  transition-property: transform;
	border-radius:100px;
	z-index: -1;
}
.anime-btn:hover {
	color:#ffffff !important;
}
.anime-btn:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
</style>

<style>
/* btn */
.anime-btn {
  position: relative;
  transition: all 0.5s;
	overflow:hidden;
	z-index:1;
}
.anime-btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #323232;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s;
  transition-property: transform;
	border-radius:100px;
	z-index: -1;
}
.anime-btn:hover {
	color:#ffffff !important;
}
.anime-btn:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
</style>