diff --git a/index.html b/index.html
index a7b5366..13367f1 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
 
 	<p>
 		Skooma lets you <strong>generate DOM nodes in JavaScript</strong>.
+		<a class="fancy" href="page/skooma.html">Read more</a>
 	</p>
 
 	<p>
@@ -30,14 +31,13 @@
 			])
 		</code-block>
 	</p>
-
-	<a class="button" href="page/skooma.html">Read more</a>
 </section>
 
 <section>
 	<h2>Element</h2>
 	<p>
 		A helper function that adds many convenient features to classes for custom elements.
+		<a class="fancy" href="page/element.html">Read More</a>
 	</p>
 
 	<p>
@@ -55,14 +55,13 @@
 			})
 		</code-block>
 	</p>
-
-	<a class="button" href="page/element.html">Read More</a>
 </section>
 
 <section>
 	<h2>Listener</h2>
 	<p>
 		Like a normal object, except you can register callbacks for property changes.
+		<a class="fancy" href="page/listener.html">Read More</a>
 	</p>
 
 	<p>
@@ -74,14 +73,13 @@
 			user.listen('name', value =&gt; console.warn(`User name has changed to ${value}`))
 		</code-block>
 	</p>
-
-	<a class="button" href="page/listener.html">Read More</a>
 </section>
 
 <section>
 	<h2>Debounce</h2>
 	<p>
 		Debounces data like user input or events that can occur in a burst.
+		<a class="fancy" href="page/debounce.html">Read More</a>
 	</p>
 
 	<p>
@@ -92,6 +90,4 @@
 			input.addEventListener("change", debounce(event =&gt; update(input.value)))
 		</code-block>
 	</p>
-
-	<a class="button" href="page/debounce.html">Read More</a>
 </section>
diff --git a/page/style.css b/page/style.css
index d647307..5df2f8f 100644
--- a/page/style.css
+++ b/page/style.css
@@ -62,31 +62,42 @@ hr {
 	margin: 1em 0;
 }
 
-.button {
+a.fancy {
 	--color-primary: var(--color-hl);
 	--color-secondary: white;
 	--color-shadow: #0004;
-	display: inline-block;
-	transition: all .3s;
-	cursor: pointer;
-	border-radius: .3em;
-	border: var(--line-mid) var(--color-primary) solid;
-	padding: .2em .6em;
-	text-decoration: none;
 	color: var(--color-primary);
+	cursor: pointer;
+	display: inline-block;
 	font-weight: bold;
+	padding: .0em .2em;
+	position: relative;
+	text-decoration: none;
+	transition: all .3s;
 }
-.button.important {
-	--color-primary: var(--color-hl);
-	--color-secondary: white;
+a.fancy::before {
+	content: '';
+	display: block;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: .1em;
+	background: var(--color-primary);
+	transition: all .3s;
+	z-index: -1;
 }
 
-.button:hover {
+a.fancy:hover {
 	color: var(--color-secondary);
-	background-color: var(--color-primary);
 	text-shadow: .2em .3em .2em var(--color-shadow);
 }
 
+a.fancy:hover::before {
+	height: 100%;
+	border-radius: .2em;
+}
+
 pre>code {
 	display: block;
 	border-left: dashed var(--line-mid) var(--color-ac);