[WXP-4951] Launch playground from documentation site

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.

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;
+  }
+}