slipnote.app
Built for people who think better out loud.
button: Improve styling
isaaccorbrey.com
+10
-4
+10
-4
src/components/Button.svelte
+10
-4
src/components/Button.svelte
···
1
1
<script lang="ts">
2
2
import type { HTMLButtonAttributes } from "svelte/elements";
3
-
let { children, ...props }: HTMLButtonAttributes = $props();
3
+
let {
4
+
children,
5
+
class: className = "",
6
+
...props
7
+
}: HTMLButtonAttributes = $props();
4
8
</script>
5
9
6
10
<button
7
11
{...props}
8
12
class="
9
-
px-3 py-px font-base
13
+
px-4 py-px font-base
10
14
bg-transparent hover:bg-slate-950/7 active:bg-slate-950/15
11
15
border-s-slate-950 rounded-md
12
16
shadow-[1px_1px_3px_rgba(15,23,42,0.75)]
13
-
border-l border-t border-r-3 border-b-3
14
-
active:border-l-3 active:border-t-3 active:border-r active:border-b
17
+
border-l border-t border-r-4 border-b-4
18
+
active:border-l-4 active:border-t-4 active:border-r active:border-b
15
19
active:shadow-[inset_-1px_-1px_3px_rgba(15,23,42,0.75)]
20
+
focus-visible:outline-none focus-visible:border-blue-700
16
21
transition-all motion-reduce:transition-none duration-60
22
+
{className}
17
23
"
18
24
>
19
25
{@render children?.()}