diff --git a/src/pages/[productLookup].astro b/src/pages/[productLookup].astro
index f91cbe2..7b5c33b 100644
--- a/src/pages/[productLookup].astro
+++ b/src/pages/[productLookup].astro
@@ -73,7 +73,9 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
 						{product?.amazonProductDetails?.description && product?.amazonProductDetails?.description}
 					</p>
 				}
-				<a href={product?.amazonLink} class="btn btn-primary">{formatAsCurrency(product?.amazonProductDetails?.price||0)} On Amazon <span>&rarr;</span></a>
+				<div class="navbar">
+					<span class="custom-btn-container"><a href={product?.amazonLink}>{formatAsCurrency(product?.amazonProductDetails?.price||0)} On Amazon <span>&rarr;</span></a></span>
+				</div>
 			</div>
 		</div>
 		<br />
@@ -162,4 +164,32 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
 		font-weight: 600;
 		font-size: 12pt;
 	}
+	.custom-btn-container {
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 8px;
+		background-position: 100%;
+		padding: 1px;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+		text-align: center;
+		display: flex;
+		align-items: center;
+	}
+	.custom-btn-container > a {
+		width: 100%;
+		border-radius: 8px;
+		text-decoration: none;
+		line-height: 1.4;
+		/* padding: calc(0.5rem - 1px); */
+		color: white;
+		padding: 1rem;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	.custom-btn-container:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
 </style>