1/* Note that you only needs to edit the config to customize the button! */
2
3.plusButton {
4  /* Config start */
5  --plus_sideLength: 2.5rem;
6  --plus_topRightTriangleSideLength: 0.9rem;
7  /* Config end */
8  position: relative;
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  border: 1px solid white;
13  width: var(--plus_sideLength);
14  height: var(--plus_sideLength);
15  background-color: #000000;
16  overflow: hidden;
17}
18
19.plusButton::before {
20  position: absolute;
21  content: "";
22  top: 0;
23  right: 0;
24  width: 0;
25  height: 0;
26  border-width: 0 var(--plus_topRightTriangleSideLength) var(--plus_topRightTriangleSideLength) 0;
27  border-style: solid;
28  border-color: transparent white transparent transparent;
29  transition-timing-function: ease-in-out;
30  transition-duration: 0.2s;
31}
32
33.plusButton:hover {
34  cursor: pointer;
35}
36
37.plusButton:hover::before {
38  --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);
39}
40
41.plusButton:focus-visible::before {
42  --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);
43}
44
45.plusButton>.plusIcon {
46  fill: white;
47  width: calc(var(--plus_sideLength) * 0.7);
48  height: calc(var(--plus_sideLength) * 0.7);
49  z-index: 1;
50  transition-timing-function: ease-in-out;
51  transition-duration: 0.2s;
52}
53
54.plusButton:hover>.plusIcon {
55  fill: black;
56  transform: rotate(180deg);
57}
58
59.plusButton:focus-visible>.plusIcon {
60  fill: black;
61  transform: rotate(180deg);
62}