CSS

hourglass/client/profile/profile.css

@@ -265,6 +265,34 @@
 }
 
 #profileSubmit {
+	font-weight: 300;
+	font-size: 3vh;
+	padding: 1.5%;
+
+	border-right: 5px solid #FCF0F0;
+	background-color: rgba(0,0,0,0.2);
+
+	display: none;
 	position:absolute;
-	top: 5%;
+	top: 40%;
+	right: 0;	
+
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease;
+}
+
+#profileSubmit span, #profileSubmit i {
+	vertical-align: middle;
+}
+
+#profileSubmit i {
+	position: relative;
+}
+
+#profileSubmit:hover {
+	background-color: rgba(0,0,0,0.3);
 }

hourglass/client/profile/profile.html

@@ -115,7 +115,7 @@
             </div>
         </div>
         <div id="profileSubmit">
-            <h3>Finish!</h3>
+            <span>Finish!</span>
             <i class="fa fa-chevron-right" aria-hidden="true"></i>
         </div>
         <div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">

hourglass/client/profile/profile.js

@@ -3,7 +3,6 @@ import {
     Template
 } from 'meteor/templating';
 
-
 Session.set("sections", [0,0]) // [Completed, Viewing] 
 Session.set("profile", {classes: []});
 Session.set("newClasses", []);
@@ -175,6 +174,7 @@ Template.profile.events({
         Session.set("profile", profile);
         Session.set("sections", [(Session.get("sections")[0] < 1) ? 1 : Session.get("sections")[0], Session.get("sections")[1]]);
         slideToField(1);
+        $("#profileSubmit").fadeIn(200);
     },
     'click #createActivate' () {
         Session.set("sections", [(Session.get("sections")[0] < 2) ? 2 : Session.get("sections")[0], Session.get("sections")[1]]);