diff --git a/src/pages/guides/getting_started/hello-world.md b/src/pages/guides/getting_started/hello-world.md
index b30d911f3..a1446104c 100644
--- a/src/pages/guides/getting_started/hello-world.md
+++ b/src/pages/guides/getting_started/hello-world.md
@@ -61,6 +61,17 @@ A pre-requisite for both tracks is to have enabled the **Add-on Development** mo
   </ol>
 </details>
 
+<div className="playground-button-container">
+  <a
+    className="open-playground-button"
+    href="https://www.adobe.com/go/addon-playground"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Launch Code Playground
+  </a>
+</div>
+
 ## Code Playground
 
 We have a [dedicated page](./code_playground.md) for the Code Playground, which you can always refer to for more detailed information. Here, we'll focus on the basics to get you started, linking to the relevant sections of the full documentation and including screenshots to help you navigate the interface.
diff --git a/src/styles.css b/src/styles.css
index b9114fdeb..28e8bbfeb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -190,3 +190,69 @@ section:has(> div > p > span > picture) {
 .developers-live-announcement a:hover span {
   color: #fff !important;
 }
+
+/* Base styles for playground button */
+a.open-playground-button,
+.playground-button-container a[href*="express.adobe.com"] {
+  display: inline-block !important;
+  padding: 8px 20px !important;
+  border-radius: 20px !important;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+  border: 2px solid rgb(34, 34, 34) !important;
+  background-color: transparent !important;
+  color: rgb(34, 34, 34) !important;
+  cursor: pointer !important;
+  font-family: "adobe-clean" !important;
+  text-decoration: none !important;
+  text-align: center !important;
+  transition: all 0.2s ease !important;
+}
+
+/* Base transition for playground button */
+a.open-playground-button,
+.playground-button-container a[href*="express.adobe.com"] {
+  transition: all 0.2s ease !important;
+}
+
+/* Hover effect */
+a.open-playground-button:hover,
+.playground-button-container a[href*="express.adobe.com"]:hover {
+  background-color: rgb(213, 213, 213) !important;
+  border-color: rgb(34, 34, 34) !important;
+}
+
+/* Remove default focus outline for mouse clicks */
+a.open-playground-button:focus,
+.playground-button-container a[href*="express.adobe.com"]:focus {
+  outline: none !important;
+}
+
+/* Show focus outline only for keyboard navigation */
+a.open-playground-button:focus-visible,
+.playground-button-container a[href*="express.adobe.com"]:focus-visible {
+  outline: 2px solid #1473E6 !important;
+  outline-offset: 2px !important;
+}
+
+/* Active/pressed state */
+a.open-playground-button:active,
+.playground-button-container a[href*="express.adobe.com"]:active {
+  background-color: rgb(180, 180, 180) !important;
+  transform: translateY(1px) !important;
+}
+
+/* Container styling */
+.playground-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+/* Hide playground button on mobile devices */
+@media (max-width: 768px) {
+  .playground-button-container {
+    display: none;
+  }
+}