css animated button

1/*
2Try this code by yourself
3HTML Layout
4<button>
5  login
6  <span></span>
7</button>
8*/
9/* Custom Design our button*/
10button{
11  padding: 10px;
12  background-color: #f00;
13  width: 120px;
14  position: relative;
15  border-radius: 10px;
16  overflow: hidden;
17}
18button > span{
19  position: absolute;
20  top: 0;
21  left: 0;
22  height: 100%;
23  width: 0;
24  background-color: #00f;
25  transition: .3s ease-in-out;
26}
27button:hover > span{
28  width: 100%;
29}