Button by cssbuttons-io

1button {
2 width: 150px;
3 height: 50px;
4 cursor: pointer;
5 display: flex;
6 align-items: center;
7 background: red;
8 border: none;
9 border-radius: 5px;
10 box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
11 background: #e62222;
12}
13
14button, button span {
15 transition: 200ms;
16}
17
18button .text {
19 transform: translateX(35px);
20 color: white;
21 font-weight: bold;
22}
23
24button .icon {
25 position: absolute;
26 border-left: 1px solid #c41b1b;
27 transform: translateX(110px);
28 height: 40px;
29 width: 40px;
30 display: flex;
31 align-items: center;
32 justify-content: center;
33}
34
35button svg {
36 width: 15px;
37 fill: #eee;
38}
39
40button:hover {
41 background: #ff3636;
42}
43
44button:hover .text {
45 color: transparent;
46}
47
48button:hover .icon {
49 width: 150px;
50 border-left: none;
51 transform: translateX(0);
52}
53
54button:focus {
55 outline: none;
56}
57
58button:active .icon svg {
59 transform: scale(0.8);
60}