Button by Juanes200122

1.light-button button.bt {
2  position: relative;
3  height: 200px;
4  display: flex;
5  align-items: flex-end;
6  outline: none;
7  background: none;
8  border: none;
9}
10
11.light-button button.bt .button-holder {
12  display: flex;
13  flex-direction: column;
14  align-items: center;
15  justify-content: center;
16  height: 100px;
17  width: 100px;
18  background-color: #0a0a0a;
19  border-radius: 5px;
20  color: #0f0f0f;
21  font-weight: 700;
22  transition: 300ms;
23  outline: #0f0f0f 2px solid;
24  outline-offset: 20;
25}
26
27.light-button button.bt .button-holder svg {
28  height: 50px;
29  fill: #0f0f0f;
30  transition: 300ms;
31}
32
33.light-button button.bt .light-holder {
34  position: absolute;
35  height: 200px;
36  width: 100px;
37  display: flex;
38  flex-direction: column;
39  align-items: center;
40}
41
42.light-button button.bt .light-holder .dot {
43  position: absolute;
44  top: 0;
45  width: 10px;
46  height: 10px;
47  background-color: #0a0a0a;
48  border-radius: 10px;
49  z-index: 2;
50}
51
52.light-button button.bt .light-holder .light {
53  position: absolute;
54  top: 0;
55  width: 200px;
56  height: 200px;
57  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
58  background: transparent;
59}
60
61.light-button button.bt:hover .button-holder svg {
62  fill: rgb(66, 81, 245);
63}
64
65.light-button button.bt:hover .button-holder {
66  color: rgba(66, 81, 245);
67  outline: rgba(66, 81, 245) 2px solid;
68  outline-offset: 2px;
69}
70
71.light-button button.bt:hover .light-holder .light {
72  background: rgb(255, 255, 255);
73  background: linear-gradient(
74    180deg,
75    rgba(66, 81, 245) 0%,
76    rgba(255, 255, 255, 0) 75%,
77    rgba(255, 255, 255, 0) 100%
78  );
79}
80