update 'after' tutorial component

6 years ago · 155bfbdc04
parent 9deebfe986
commit 155bfbdc04
1 changed files with 14 additions and 7 deletions
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
@ -1,12 +1,19 @@
 <style>
 	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+		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;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
 	}
 </style>