1.button {
2  display: flex;
3}
4
5.box {
6  width: 35px;
7  height: 40px;
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  font-size: 15px;
12  font-weight: 700;
13  color: #fff;
14  transition: all .8s;
15  cursor: pointer;
16  position: relative;
17  background: rgb(58, 165, 253);
18  overflow: hidden;
19}
20
21.box:before {
22  content: "W";
23  position: absolute;
24  top: 0;
25  background: #0f0f0f;
26  width: 100%;
27  height: 100%;
28  display: flex;
29  align-items: center;
30  justify-content: center;
31  transform: translateY(100%);
32  transition: transform .4s;
33}
34
35.box:nth-child(2)::before {
36  transform: translateY(-100%);
37  content: 'O';
38}
39
40.box:nth-child(3)::before {
41  content: 'R';
42}
43
44.box:nth-child(4)::before {
45  transform: translateY(-100%);
46  content: 'L';
47}
48
49.box:nth-child(5)::before {
50  content: 'D';
51}
52
53.button:hover .box:before {
54  transform: translateY(0);
55}