CSS按钮悬停动画

 <style>
.viewcontent__action{
	position: relative;
	width:100px;
}	
.viewcontent__action a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
     background: #198754bf;
  transition: 0.3s;
  content: "";
  z-index: -1;
}
.viewcontent__action a:hover{color:#fff;}
.viewcontent__action a:hover::before {
  width: 100%;
  transition: 0.3s;
  color: #fff;
}

 </style>
  

<div class="viewcontent__action">
	<a href="">我是按钮</a>
</div>