1.button {
2 position: relative;
3 font-size: 17px;
4 font-weight: 800;
5 color: #c77dff;
6 padding: 1em 2em;
7 border: none;
8 background: none;
9 clip-path: polygon(0 0, 67% 0, 100% 100%, 33% 100%);
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 overflow: hidden;
14 transition: 0.3s 0.3s;
15}
16
17button:hover {
18 text-shadow: 1px 1px 20px #e0aaff, 1px 1px 60px #e0aaff;
19}
20
21button:active {
22 transform: scale(0.89);
23}
24
25.button::before,
26.button::after {
27 content: "";
28 position: absolute;
29 width: 0;
30 height: 2px;
31 background: #c77dff;
32 transition: width 0.3s 0.6s;
33}
34
35.button::before {
36 top: 0;
37 left: 0;
38 transform-origin: top;
39}
40
41.button::after {
42 bottom: 0;
43 right: 0;
44 transform-origin: bottom;
45}
46
47.button:hover::before,
48.button:hover::after {
49 width: 65%;
50}
51
52.button span {
53 position: absolute;
54 width: 0;
55 height: 2px;
56 background: #c77dff;
57 transition: width 0.3s, transform 0.3s 0.3s;
58 transform: rotate(22.3deg);
59}
60
61.button span:nth-child(1) {
62 top: 0;
63 left: 0;
64 transform-origin: left;
65}
66
67.button span:nth-child(2) {
68 bottom: 0;
69 right: 0;
70 transform-origin: right;
71}
72
73.button:hover span {
74 width: 55%;
75 transform: rotate(50deg);
76}
77
