practice

　　　　

<html>
<meta charset="utf-8">

<style>
[class^="HOVER_"]{position:relative;
display:block;
overflow:hidden;
height:80px;
width:480px;
margin:0 auto;
text-transform:uppercase;
border:1px solid currentcolor;
cursor:pointer;}
div{text-align:center;
margin:100px;}
a{position:relative;
color:#123456;
text-decoration:none;
font-size:24px;
font-family:"Comic Sans MS";
font-weight:bold;
vertical-align:middle;
line-height:80px;}
a::before{left:-40px;
transform:translate(-70%,-70%);}
a::after{right:-40px;
transform:translate(70%,-70%);}
a::before,a::after{position:absolute;
content:"";
top:50%;
width:40px;
height:40px;
background-color:#abcdef;
border-radius:50%;
box-sizing:border-box;
transition:1s;
z-index:-10;}
a:hover{color:#456789;}
a:hover::before{animation:criss-cross-left 1s both;
animation-direction:alternate;}
a:hover::after{animation:criss-cross-right 1s both;
animation-direction:alternate;}
@keyframes criss-cross-left{0%{left:-40px;}
50%{left:50%;
width:40px;
height:40px;}
100%{left:50%;
width:400px;
height:400px;}}
@keyframes criss-cross-right{0%{right:-40px;}
50%{right:50%;
width:40px;
height:40px;}
100%{right:50%;
width:400px;
height:400px;}}
</style>

<div><a href="#"class="HOVER_052_animation_button"><span>HOVER_052_animation_button</span></a></div>

</html>