diff --git a/app/styles/app/components/buttons.sass b/app/styles/app/components/buttons.sass
index 0418567b..0819ae78 100644
--- a/app/styles/app/components/buttons.sass
+++ b/app/styles/app/components/buttons.sass
@@ -57,7 +57,6 @@ $button-border-color: #d4d4d4
   .button--signin
     display: inline-block
     padding: 0.5em 1.9em 0.45em 0.6em
-    background: #39a85b
     color: $white
     font-size: $font-size-small
     line-height: 1
@@ -66,10 +65,17 @@ $button-border-color: #d4d4d4
     border: none
     vertical-align: middle
     cursor: pointer
-    background: 
-      image: url(../images/ui/github-signin.svg)
+    background:
+      color: #39a85b
+      image: inline-image('ui/github-signin.svg')
       repeat: no-repeat
       position: 95.5% 44%
     &:hover
       background-color: #73c78d
       text-decoration: none
+    &.signing-in
+      background-image: inline-image('ui/spinner.svg')
+      background-position: 92% 47%
+      &:hover
+        background-color: #39a85b
+
diff --git a/app/styles/app/top.sass b/app/styles/app/top.sass
index 4e9d9ef8..d320186d 100644
--- a/app/styles/app/top.sass
+++ b/app/styles/app/top.sass
@@ -129,10 +129,8 @@
     padding: 0.2em 0px 0.5em
     @media #{$medium-up}
       padding: 0
-      &:not(.signed-out)
+      &.signed-in
         top: 2px
-    .signing-in
-      background: inline-image('ui/spinner.svg') no-repeat 110px 22px
 
     img
       width: 30px
diff --git a/app/templates/top.hbs b/app/templates/top.hbs
index 644b6061..46848fbf 100644
--- a/app/templates/top.hbs
+++ b/app/templates/top.hbs
@@ -74,7 +74,7 @@
         {{#link-to "profile" class="signed-in"}}<img {{bind-attr src="gravatarUrl"}}/>{{userName}}{{/link-to}}
       {{/if}}
       {{#if auth.signingIn}}
-        <span class="signing-in">Signing In</span>
+        <button class="signing-in button--signin">Signing In</button>
       {{/if}}
     </p>
     <ul>