From 7c3c4532e17a9d34113f745f3c0306f142b68107 Mon Sep 17 00:00:00 2001
From: Peter Skelin <petar.skelin@sap.com>
Date: Wed, 15 May 2019 12:47:04 +0300
Subject: [PATCH] docs: add codesandbox link (#392)

---
 packages/playground/webapp/css/index.css | 13 +++++++++++++
 packages/playground/webapp/index.html    |  5 ++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/playground/webapp/css/index.css b/packages/playground/webapp/css/index.css
index 67ae291916d4..56ce2e98110c 100644
--- a/packages/playground/webapp/css/index.css
+++ b/packages/playground/webapp/css/index.css
@@ -95,6 +95,19 @@ body {
     transition: all 0.5s ease-out;
 }
 
+.coding-button {
+	width: 20.75rem;
+	background: #fff;
+	color: #242424;
+	margin-right: 0.7rem;
+}
+
+.coding-button:hover {
+	background-color: #dbdbdb;
+    border-color: #dbdbdb;
+    transition: all 0.5s ease-out;
+}
+
 .secondary-button {
 	width: 11.44rem;
 	background: transparent;
diff --git a/packages/playground/webapp/index.html b/packages/playground/webapp/index.html
index fe19773f697f..b9e1bafbc311 100644
--- a/packages/playground/webapp/index.html
+++ b/packages/playground/webapp/index.html
@@ -71,7 +71,10 @@ <h2>Test the UI5 Web Components</h2>
 <ui5-datepicker></ui5-datepicker>
                         </xmp></pre>
                     </div>
-                    <a href="./playground/" target="_blank" class="custom-button main-button">Get Started</a>
+                    <a href="./playground/" target="_blank" class="custom-button coding-button">Get Started</a>
+                    <a href="https://codesandbox.io/s/71r1x5o51q?fontsize=14&module=%2Findex.html"target="_blank" class="custom-button coding-button">
+                        Start coding in your browser (CodeSandbox)
+                    </a>
                 </div>
             </section>