Button by Sameer2244

1.btn-container {
2  width: fit-content;
3  height: fit-content;
4  position: relative;
5}
6
7.svg {
8  position: absolute;
9  top: 50%;
10  left: 50%;
11  z-index: -1;
12  transform: translate(-50%,-50%);
13  transition: 0.5s;
14}
15
16.btn {
17  background-color: rgb(66, 125, 194);
18  z-index: 10;
19  color: white;
20  padding: 0.5rem 2rem;
21  font-size: 1.2rem;
22  font-weight: bold;
23  border-radius: 0.5rem;
24  transition: 0.2s;
25  cursor: pointer;
26}
27
28.btn-container:hover {
29  box-shadow: rgba(66, 125, 194, 0.8) 0px 0px 54px;
30}
31
32.btn:hover {
33  outline: rgb(66, 125, 194) solid 2px;
34  background-color: #212121;
35}
36
37.btn-container:hover > .svg-1 {
38  transform: translate(130%,50%);
39}
40
41.btn-container:hover > .svg-2 {
42  transform: translate(-120%,-150%) rotate(30deg);
43}
44
45.btn-container:hover > .svg-3 {
46  transform: translate(60%,-150%) rotate(-45deg);
47}
48
49.btn-container:hover > .svg-4 {
50  transform: translate(-280%,0%) rotate(30deg);
51}
52
53.btn-container:hover > .svg-5 {
54  transform: translate(-80%,60%) rotate(-45deg);
55}
56
57.btn:active {
58  transform: scale(1.05);
59}
60