Button by sashadubovyi

1.btn {
2  cursor: pointer;
3  position: relative;
4  padding-left: 30px;
5  padding-right: 30px;
6  padding-top: 10px;
7  padding-bottom: 10px;
8  font-size: 20px;
9  font-weight: 400;
10  border: none;
11  display: flex;
12  align-items: center;
13  background: transparent;
14  color: #f93d21;
15  transition: all 100ms;
16  overflow: hidden;
17  height: 50px;
18  width: 170px;
19}
20
21.left-span {
22  position: absolute;
23  left: 0;
24  height: 50px;
25  width: 15px;
26  border-top: 1px solid #f93d21;
27  border-bottom: 1px solid #f93d21;
28  border-left: 1px solid #f93d21;
29  transition: all 500ms;
30}
31
32.right-span {
33  position: absolute;
34  right: 0;
35  height: 50px;
36  width: 15px;
37  border-top: 1px solid #f93d21;
38  border-bottom: 1px solid #f93d21;
39  border-right: 1px solid #f93d21;
40  transition: all 500ms;
41}
42
43.text-btn {
44  position: absolute;
45  transform: translateX(0px);
46  width: 110px;
47  transition: all 200ms;
48}
49
50.hidden-text-btn {
51  position: absolute;
52  transform: translateX(150px);
53  opacity: 0;
54  transition: all 200ms;
55}
56
57.btn:hover .text-btn {
58  transform: translateX(-150px);
59  opacity: 0;
60}
61
62.btn:hover .hidden-text-btn {
63  transform: translateX(0px);
64  opacity: 1;
65}
66
67.btn:hover .right-span,
68.btn:hover .left-span {
69  width: 100%;
70}
71