pluie.me
Source code + assets for pluie.me
1.arrow-button {
2 @apply transition;
3
4 position: relative;
5 height: 2.5rem;
6 padding: 0.5rem 4.5rem 0.5rem 0.75rem;
7
8 &::before {
9 @apply absolute w-0 h-0 right-0 border-main-bg border-l-transparent;
10 content: "";
11 top: 0;
12 filter: opacity(0.8);
13 transition: border-width 0.2s;
14
15 --bg-transition: inherit;
16 border-width: 1.3rem calc(3rem * (1 - var(--bg-transition))) 1.3rem 1rem;
17 }
18
19 &::after {
20 @apply absolute w-0 h-0 right-0 border-main-bg border-l-transparent;
21 content: "";
22 top: 0;
23 transition: border-width 0.2s;
24 border-width: 1.3rem 0rem 1.3rem 1rem;
25 }
26}