From 8467614081493dbb66b0b58b713f66ea7a129e0d Mon Sep 17 00:00:00 2001
From: BabakFP <44144724+babakfp@users.noreply.github.com>
Date: Mon, 19 Apr 2021 17:51:50 -0700
Subject: [PATCH] Reversing HTML and CSS order

- Also making the button simple and prettier.
---
 .../app-a/CustomButton.svelte                 | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
index 0955930b5d..8c2ef1aaf4 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
@@ -1,22 +1,24 @@
+
+<button>
+	Click me
+</button>
+
+
 <style>
 	button {
-		height: 4rem;
-		width: 8rem;
-		background-color: #aaa;
-		border-color: #f1c40f;
-		color: #f1c40f;
-		font-size: 1.25rem;
-		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
-		background-position: 100%;
-		background-size: 400%;
-		transition: background 300ms ease-in-out;
+		background: #E2E8F0;
+		color: #64748B;
+		border: unset;
+		border-radius: 6px;
+		padding: .75rem 1.5rem;
+		cursor: pointer;
 	}
 	button:hover {
-		background-position: 0;
-		color: #aaa;
+		background: #CBD5E1;
+		color: #475569;
+	}
+	button:focus {
+		background: #94A3B8;
+		color: #F1F5F9;
 	}
 </style>
-
-<button>
-	Click me
-</button>
\ No newline at end of file