1button {
2  position: relative;
3  width: 150px;
4  height: 50px;
5  box-shadow: 0 5px 25px rgba(0, 0,0, .25);
6  border: none;
7}
8
9button span {
10  position: absolute;
11  top: 0;
12  left: 0;
13  width: 100%;
14  height: 100%;
15  color: #fff;
16  background: #002faf;
17  display: flex;
18  justify-content: center;
19  align-items: center;
20  text-transform: uppercase;
21  letter-spacing: 2px;
22  font-size: 17px;
23}
24
25button span:nth-child(2) {
26  background: #fff;
27  color: #002ba0;
28  overflow: hidden;
29  z-index: 2;
30  transition: .5s;
31  clip-path: polygon(50% 0%, 100% 0%,100% 100%,50% 100%,50% 53%);
32}
33
34button span:nth-child(2):hover {
35  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 0 50%);
36}
37
38button span:nth-child(1):hover ~ span:nth-child(2) {
39  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%, 100%50%);
40}