diff --git a/src/lib/cards/ButtonCard/ButtonCard.svelte b/src/lib/cards/ButtonCard/ButtonCard.svelte
--- a/src/lib/cards/ButtonCard/ButtonCard.svelte
+++ b/src/lib/cards/ButtonCard/ButtonCard.svelte
@@ -3,6 +3,7 @@
 	import { user } from '$lib/atproto';
 	import { getHandleOrDid } from '$lib/atproto/methods';
 	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
+	import { cn } from '@foxui/core';
 	import type { ContentComponentProps } from '../types';
 
 	let { item }: ContentComponentProps = $props();
@@ -10,7 +11,10 @@
 
 {#snippet content()}
 	<span
-		class="text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold"
+		class={cn(
+			'text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold',
+			item.color === 'transparent' ? 'bg-accent-500 dark:text-base-950 text-xl rounded-2xl px-5 py-2.5' : ''
+		)}
 	>
 		{item.cardData.text || 'Click me'}
 	</span>
@@ -25,7 +29,10 @@
 				loginModalState.show();
 			}
 		}}
-		class="hover:bg-accent-100/20 flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100"
+		class={[
+			'flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100',
+			item.color === 'transparent' ? 'hover:bg-transparent' : 'hover:bg-accent-100/20'
+		]}
 	>
 		{@render content()}
 	</button>
@@ -34,7 +41,10 @@
 		href={item.cardData.href || '#'}
 		target="_blank"
 		rel="noopener noreferrer"
-		class="hover:bg-accent-100/20 flex h-full w-full flex-col items-center justify-center transition-colors duration-100"
+		class={[
+			'flex h-full w-full flex-col items-center justify-center transition-colors duration-100',
+			item.color === 'transparent' ? 'hover:bg-transparent' : 'hover:bg-accent-100/20'
+		]}
 	>
 		{@render content()}
 	</a>
diff --git a/src/lib/cards/ButtonCard/EditingButtonCard.svelte b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
--- a/src/lib/cards/ButtonCard/EditingButtonCard.svelte
+++ b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
 	import type { ContentComponentProps } from '../types';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
+	import { cn } from '@foxui/core';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 </script>
 
-<div class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4">
+<div
+	class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4"
+>
 	<PlainTextEditor
 		key="text"
 		bind:contentDict={item.cardData}
 		placeholder="Button text"
-		class="line-clamp-1 text-center text-2xl font-bold"
+		class={cn(
+			'line-clamp-1 text-center text-2xl font-semibold',
+			item.color === 'transparent'
+				? 'bg-accent-500 dark:text-base-950 rounded-2xl px-5 py-2.5 text-xl'
+				: ''
+		)}
 	/>
 </div>