The Node.js® Website
keii.dev
1.button {
2 @apply relative
3 inline-flex
4 items-center
5 gap-2
6 px-4.5
7 py-2.5
8 text-center
9 font-semibold;
10
11 svg {
12 @apply size-5;
13 }
14
15 &[aria-disabled='true'] {
16 @apply cursor-not-allowed;
17 }
18
19 &.neutral {
20 @apply rounded
21 bg-neutral-900
22 text-white
23 dark:text-neutral-200;
24
25 &:hover {
26 @apply bg-neutral-800;
27 }
28
29 &[aria-disabled='true'] {
30 @apply bg-neutral-900
31 opacity-50;
32 }
33
34 &:focus {
35 @apply bg-neutral-800;
36 }
37 }
38
39 &.primary {
40 @apply rounded
41 border
42 border-green-600
43 bg-green-600
44 text-white
45 shadow-sm;
46
47 &:hover {
48 @apply border-green-700
49 bg-green-700
50 text-white;
51 }
52
53 &:focus {
54 @apply border-green-700
55 bg-green-700;
56 }
57
58 &[aria-disabled='true'] {
59 @apply bg-green-600
60 opacity-50;
61 }
62 }
63
64 &.secondary {
65 @apply rounded-lg
66 text-neutral-800
67 dark:text-neutral-200;
68
69 &:hover {
70 @apply bg-neutral-100
71 text-neutral-800
72 dark:bg-neutral-900
73 dark:text-neutral-200;
74 }
75
76 &[aria-disabled='true'] {
77 @apply bg-transparent
78 opacity-50;
79 }
80
81 &:focus {
82 @apply bg-neutral-100
83 text-neutral-800
84 dark:bg-neutral-900
85 dark:text-neutral-200;
86 }
87 }
88
89 &.special {
90 @apply rounded-lg
91 border
92 border-green-600/30
93 bg-green-600/10
94 text-white
95 shadow-sm;
96
97 &::before {
98 @apply absolute
99 left-0
100 right-0
101 top-0
102 -z-10
103 mx-auto
104 h-full
105 w-full
106 bg-gradient-glow-backdrop
107 opacity-30
108 content-[''];
109 }
110
111 &::after {
112 @apply absolute
113 -top-px
114 left-0
115 right-0
116 mx-auto
117 h-px
118 w-2/5
119 bg-gradient-to-r
120 from-green-600/0
121 via-green-600
122 to-green-600/0
123 content-[''];
124 }
125
126 &[aria-disabled='true'] {
127 @apply opacity-50;
128 }
129
130 &:hover {
131 @apply bg-green-600/20;
132 }
133
134 &:focus {
135 @apply bg-green-600/20;
136 }
137 }
138}