diff --git a/src/routes/basket.module.scss b/src/routes/basket.module.scss
index 648a789..c76dc6b 100644
--- a/src/routes/basket.module.scss
+++ b/src/routes/basket.module.scss
@@ -50,17 +50,37 @@
 }
 
 .emptyCta {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-1;
   padding: $space-2 $space-4;
   border-radius: $radius;
   background: $color-primary;
   color: $color-primary-contrast;
   font-weight: 600;
   text-decoration: none;
-  transition: opacity 0.15s ease;
+  box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 
   &:hover {
-    opacity: 0.9;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px color-mix(in srgb, $color-primary 45%, transparent);
   }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
+  }
+}
+
+.emptyCtaArrow {
+  transition: transform 0.15s ease;
+}
+
+.emptyCta:hover .emptyCtaArrow {
+  transform: translateX(3px);
 }
 
 .lines {
diff --git a/src/routes/basket.tsx b/src/routes/basket.tsx
index d1b0203..2f489a2 100644
--- a/src/routes/basket.tsx
+++ b/src/routes/basket.tsx
@@ -78,6 +78,9 @@ const BasketPage = () => {
               </p>
               <Link to="/" className={styles.emptyCta}>
                 Browse the menu
+                <span className={styles.emptyCtaArrow} aria-hidden="true">
+                  →
+                </span>
               </Link>
             </motion.div>
           ) : (