diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 591f662..fe14c0b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,28 +1,29 @@
 {
-	"permissions": {
-		"allow": [
-			"Bash(pnpm check:*)",
-			"mcp__ide__getDiagnostics",
-			"mcp__plugin_svelte_svelte__svelte-autofixer",
-			"mcp__plugin_svelte_svelte__list-sections",
-			"Bash(pkill:*)",
-			"Bash(timeout 8 pnpm dev:*)",
-			"Bash(git checkout:*)",
-			"Bash(npx svelte-kit:*)",
-			"Bash(ls:*)",
-			"Bash(pnpm format:*)",
-			"Bash(pnpm add:*)",
-			"WebSearch",
-			"WebFetch(domain:github.com)",
-			"WebFetch(domain:flipclockjs.com)",
-			"WebFetch(domain:codepen.io)",
-			"WebFetch(domain:flo-bit.dev)",
-			"Bash(pnpm install)",
-			"Bash(pnpm install:*)",
-			"Bash(pnpm config:*)",
-			"Bash(lsof:*)",
-			"Bash(pnpm dev)",
-			"Bash(pnpm exec svelte-kit:*)"
-		]
-	}
+  "permissions": {
+    "allow": [
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections",
+      "Bash(pkill:*)",
+      "Bash(timeout 8 pnpm dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm format:*)",
+      "Bash(pnpm add:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:flipclockjs.com)",
+      "WebFetch(domain:codepen.io)",
+      "WebFetch(domain:flo-bit.dev)",
+      "Bash(pnpm install)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm config:*)",
+      "Bash(lsof:*)",
+      "Bash(pnpm dev)",
+      "Bash(pnpm exec svelte-kit:*)",
+      "Bash(pnpm build:*)"
+    ]
+  }
 }
diff --git a/src/lib/cards/ButtonCard/ButtonCard.svelte b/src/lib/cards/ButtonCard/ButtonCard.svelte
new file mode 100644
index 0000000..d8048e5
--- /dev/null
+++ b/src/lib/cards/ButtonCard/ButtonCard.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+
+	let { item }: ContentComponentProps = $props();
+</script>
+
+<a
+	href={item.cardData.href || '#'}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="flex h-full w-full items-center justify-center p-4"
+>
+	<span
+		class="bg-accent-500 hover:bg-accent-600 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 text-center font-semibold shadow-md transition-colors"
+	>
+		{item.cardData.text || 'Click me'}
+	</span>
+</a>
diff --git a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
new file mode 100644
index 0000000..a248500
--- /dev/null
+++ b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import type { SettingsComponentProps } from '../types';
+	import { Input, Label } from '@foxui/core';
+
+	let { item = $bindable<Item>(), onclose }: SettingsComponentProps = $props();
+
+	function confirmUrl() {
+		let href = item.cardData.href?.trim() || '';
+		if (href && !/^https?:\/\//i.test(href)) {
+			href = 'https://' + href;
+		}
+		item.cardData.href = href;
+		onclose();
+	}
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-1">
+		<Label for="button-href" class="text-sm">Link URL</Label>
+		<Input
+			id="button-href"
+			bind:value={item.cardData.href}
+			placeholder="youtube.com"
+			class="text-sm"
+			onkeydown={(event) => {
+				if (event.code === 'Enter') {
+					event.preventDefault();
+					confirmUrl();
+				}
+			}}
+		/>
+	</div>
+</div>
diff --git a/src/lib/cards/ButtonCard/EditingButtonCard.svelte b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
new file mode 100644
index 0000000..d39a5b1
--- /dev/null
+++ b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
+
+	let { item = $bindable() }: ContentComponentProps = $props();
+</script>
+
+<div class="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
+	<div
+		class="bg-accent-500 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 shadow-md"
+	>
+		<PlainTextEditor
+			key="text"
+			bind:contentDict={item.cardData}
+			placeholder="Button text"
+			class="text-center font-semibold"
+		/>
+	</div>
+</div>
diff --git a/src/lib/cards/ButtonCard/index.ts b/src/lib/cards/ButtonCard/index.ts
new file mode 100644
index 0000000..e5c0080
--- /dev/null
+++ b/src/lib/cards/ButtonCard/index.ts
@@ -0,0 +1,31 @@
+import type { CardDefinition } from '../types';
+import ButtonCard from './ButtonCard.svelte';
+import EditingButtonCard from './EditingButtonCard.svelte';
+import ButtonCardSettings from './ButtonCardSettings.svelte';
+
+export const ButtonCardDefinition: CardDefinition = {
+	type: 'button',
+	contentComponent: ButtonCard,
+	editingContentComponent: EditingButtonCard,
+	settingsComponent: ButtonCardSettings,
+	sidebarButtonText: 'Button',
+
+	createNew: (card) => {
+		card.cardData = {
+			text: 'Click me'
+		};
+		card.w = 2;
+		card.h = 1;
+		card.mobileW = 4;
+		card.mobileH = 2;
+	},
+
+	defaultColor: 'transparent',
+	allowSetColor: true,
+	canHaveLabel: false,
+
+	minW: 2,
+	minH: 1,
+	maxW: 8,
+	maxH: 4
+};
diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 1aa9e96..59e41cf 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -31,9 +31,11 @@ import { VCardCardDefinition } from './VCardCard';
 import { DrawCardDefinition } from './DrawCard';
 import { TimerCardDefinition } from './TimerCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
+import { ButtonCardDefinition } from './ButtonCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
+	ButtonCardDefinition,
 	ImageCardDefinition,
 	VideoCardDefinition,
 	TextCardDefinition,