Reversing HTML and CSS order

- Also making the button simple and prettier.

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;
+		background: #E2E8F0;
-		width: 8rem;
+		color: #64748B;
-		background-color: #aaa;
+		border: unset;
-		border-color: #f1c40f;
+		border-radius: 6px;
-		color: #f1c40f;
+		padding: .75rem 1.5rem;
-		font-size: 1.25rem;
+		cursor: pointer;
-		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
-		background-position: 100%;
-		background-size: 400%;
-		transition: background 300ms ease-in-out;
 	}
 	button:hover {
-		background-position: 0;
+		background: #CBD5E1;
-		color: #aaa;
+		color: #475569;
+	}
+	button:focus {
+		background: #94A3B8;
+		color: #F1F5F9;
 	}
 </style>
-
-<button>
-	Click me
-</button>