Button by mRcOol7

1.LinkedinBtn {
2  width: 45px;
3  height: 45px;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  border: none;
8  background-color: transparent;
9  position: relative;
10  border-radius: 7px;
11  cursor: pointer;
12  transition: all 0.3s;
13}
14
15.LinkedinBtn .svgContainer {
16  width: 100%;
17  height: 100%;
18  display: flex;
19  align-items: center;
20  justify-content: center;
21  background-color: transparent;
22  backdrop-filter: blur(4px);
23  letter-spacing: 1px; /* Adjusted letter spacing */
24  border-radius: 10px;
25  transition: all 0.3s;
26  border: 1px solid rgba(156, 156, 156, 0.466);
27}
28
29.LinkedinBtn .BG {
30  position: absolute;
31  content: "";
32  width: 100%;
33  height: 100%;
34  background: #0077b5;
35  z-index: -1;
36  border-radius: 9px;
37  pointer-events: none;
38  transition: all 0.3s;
39}
40
41.LinkedinBtn:hover {
42  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Added box shadow effect */
43}
44
45.LinkedinBtn:hover .BG {
46  transform: rotate(35deg);
47  transform-origin: bottom;
48}
49
50.LinkedinBtn:hover .svgContainer {
51  background-color: rgba(156, 156, 156, 0.466);
52}
53