Button by MuhammadHasann

1button {
2  position: relative;
3  padding: 13px 35px;
4  background: #2e323c;
5  font-size: 17px;
6  font-weight: 900;
7  color: #FFF;
8  border: 3px solid #2e323c;
9  border-radius: 8px;
10  transition: all .3s ease-in-out;
11}
12
13p:nth-child(1) {
14  position: absolute;
15  top: 50%;
16  left: 50%;
17  transform: translate(-50%, -50%);
18  font-size: 17px;
19  font-weight: 900;
20  color: #FFF;
21  transition: all .3s ease-in-out;
22  z-index: -5;
23}
24
25p:nth-child(2) {
26  position: absolute;
27  top: 50%;
28  left: 50%;
29  transform: translate(-50%, -50%);
30  font-size: 17px;
31  font-weight: 900;
32  color: #FFF;
33  transition: all .3s ease-in-out;
34  z-index: -5;
35}
36
37p:nth-child(3) {
38  position: absolute;
39  top: 50%;
40  left: 50%;
41  transform: translate(-50%, -50%);
42  font-size: 17px;
43  font-weight: 900;
44  color: #FFF;
45  transition: all .3s ease-in-out;
46  z-index: -5;
47}
48
49p:nth-child(4) {
50  position: absolute;
51  top: 50%;
52  left: 50%;
53  transform: translate(-50%, -50%);
54  font-size: 17px;
55  font-weight: 900;
56  color: #FFF;
57  transition: all .3s ease-in-out;
58  z-index: -5;
59}
60
61button:hover {
62  background: transparent;
63  box-shadow: 0 0 15px #2e323c;
64}
65
66button:hover p:nth-child(1) {
67  top: 0%;
68  filter: drop-shadow(0 0 5px #FFFFFF);
69  z-index: 1;
70}
71
72button:hover p:nth-child(2) {
73  top: -50%;
74  filter: drop-shadow(0 0 5px #FFFFFF);
75  z-index: 1;
76}
77
78button:hover p:nth-child(3) {
79  top: 100%;
80  filter: drop-shadow(0 0 5px #FFFFFF);
81  z-index: 1;
82}
83
84button:hover p:nth-child(4) {
85  top: 150%;
86  filter: drop-shadow(0 0 5px #FFFFFF);
87  z-index: 1;
88}
89
90button:active p:nth-child(1) {
91  top: -20%;
92  filter: drop-shadow(0 0 5px #FFFFFF);
93  z-index: 1;
94}
95
96button:active p:nth-child(2) {
97  top: -90%;
98  filter: drop-shadow(0 0 5px #FFFFFF);
99  z-index: 1;
100}
101
102button:active p:nth-child(3) {
103  top: 120%;
104  filter: drop-shadow(0 0 5px #FFFFFF);
105  z-index: 1;
106}
107
108button:active p:nth-child(4) {
109  top: 190%;
110  filter: drop-shadow(0 0 5px #FFFFFF);
111  z-index: 1;
112}