Button by KhaledMatalkah

1.button {
2  background-color: transparent;
3  color: #ffffff;
4  padding: 15px 30px;
5  border-radius: 5px;
6  cursor: pointer;
7  position: relative;
8  overflow: hidden;
9  transition: background-color 0.3s ease-in, transform 0.3s ease;
10  font-size: 18px;
11  font-weight: bold;
12  border: none;
13  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
14}
15
16.button:before,
17.button:after {
18  content: "";
19  position: absolute;
20  left: -100%;
21  width: 200%;
22  height: 100%;
23  background-color: #76a6ca;
24  opacity: 0;
25  transition: transform 0.5s ease, opacity 0.5s ease;
26  transform: rotate(45deg);
27  transform-origin: center;
28}
29
30.button:before {
31  top: 0;
32}
33
34.button:after {
35  bottom: 0;
36}
37
38.button:hover:before,
39.button:hover:after {
40  opacity: 0.6;
41  transform: rotate(0deg);
42}
43
44.button:hover {
45  transform: translateY(-5px);
46  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
47}
48
49.button:active {
50  background-color: #76a6ca;
51  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
52  transform: scale(0.98);
53}
54