Button by kamehame-ha

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