diff --git a/basic/index.html b/basic/index.html
index 9f4b47e..db1c76a 100644
--- a/basic/index.html
+++ b/basic/index.html
@@ -747,5 +747,5 @@ M hello.rb
   </div>
 </div>
 
-<p><a href="/branching">On to Branching and Merging &#187;</a></p>
+<p><a class="page-button next-page" href="/branching">On to Branching and Merging &#187;</a></p>
 
diff --git a/branching/index.html b/branching/index.html
index a65fe9c..735a140 100644
--- a/branching/index.html
+++ b/branching/index.html
@@ -777,5 +777,5 @@ ab5ab4c added erlang
   </div>
 </div>
 
-<p><a href="/remotes">On to Sharing and Updating Projects &#187;</a></p>
+<p><a class="page-button next-page" href="/remotes">On to Sharing and Updating Projects &#187;</a></p>
 
diff --git a/creating/index.html b/creating/index.html
index 78c3127..279421d 100644
--- a/creating/index.html
+++ b/creating/index.html
@@ -134,4 +134,4 @@ config      index       <span class="blue">objects</span>
   </div>
 </div>
 
-<p><a href="/basic">On to Basic Snapshotting &#187;</a></p>
+<p><a class="page-button next-page" href="/basic">On to Basic Snapshotting &#187;</a></p>
diff --git a/css/layout.css b/css/layout.css
index 3d1bbe7..1c324ab 100755
--- a/css/layout.css
+++ b/css/layout.css
@@ -123,6 +123,65 @@ a {
 a:hover {
 	color:#333;
 }
+a.page-button {
+	background: #e4eafa none 0 0 repeat-x;
+	border: solid 1px #c9172e;
+	color: #c9172e;
+	cursor: pointer;
+	display: inline-block;
+	font-weight: bold;
+	font-size: 12px;
+	line-height: 100%;
+	margin: 1px;
+	padding: 0.8em 1em;
+	position: relative;
+	text-decoration: none;
+	text-shadow: #fff 0 1px 0;
+	vertical-align: middle;
+	white-space: nowrap;
+	float:right;
+	background-image: -moz-linear-gradient(-90deg,
+		#eeeeee 1%,
+		#fdf6f7 5%,
+		#fae9eb 70%,
+		#f7dcdf 100%);
+	background-image: -webkit-gradient(linear,left top,left bottom,
+		color-stop(0.01, #eee),
+		color-stop(0.05, #fdf6f7),
+		color-stop(0.70, #fae9eb),
+		color-stop(1, #f7dcdf));
+}
+a.next-page {
+	border-right: none;
+	margin-right: 26px;
+	padding-right: 0;
+}
+a.next-page:after, a.prev-page:after {
+	border: solid 1px #c9172e;
+	content: '';
+	display: block;
+	position: absolute;
+	top: .37em;
+	width: 1.7em;
+	height: 1.7em;
+	text-shadow: none;
+	z-index: -1;
+}
+a.next-page:after {
+	right: -.97em;
+	-moz-transform: rotate(-45deg);
+	background-image: -moz-linear-gradient(-135deg,
+		#eeeeee 1%,
+		#fdf6f7 5%,
+		#fae9eb 70%,
+		#f7dcdf 100%);
+	-webkit-transform:rotate(-45deg);
+	background-image: -webkit-gradient(linear,100% 0%, 0% 100%,
+		color-stop(0.01, #eee),
+		color-stop(0.05, #fdf6f7),
+		color-stop(0.70, #fae9eb),
+		color-stop(1, #f7dcdf));
+}
 
 /* headings
 ----------------------------------------------- */
diff --git a/index.html b/index.html
index f29f29f..bdee86e 100644
--- a/index.html
+++ b/index.html
@@ -109,4 +109,4 @@ layout: reference
   </div>
 </div>
 
-<p><a href="/creating">On to Getting and Creating Projects &#187;</a></p>
+<p><a class="page-button next-page" href="/creating">On to Getting and Creating Projects &#187;</a></p>
diff --git a/remotes/index.html b/remotes/index.html
index ec187cd..94f41ec 100644
--- a/remotes/index.html
+++ b/remotes/index.html
@@ -340,4 +340,4 @@ fast-forwards' section of 'git push --help' for details.
   </div>
 </div>
 
-<p><a href="/inspect">On to Inspection and Comparison &#187;</a></p>
+<p><a class="page-button next-page" href="/inspect">On to Inspection and Comparison &#187;</a></p>