diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less
index 4a6ce758bd..a41ef42e1b 100644
--- a/services/web/frontend/stylesheets/app/homepage.less
+++ b/services/web/frontend/stylesheets/app/homepage.less
@@ -182,7 +182,7 @@
   }
 }
 
-.hp-login-btn {
+.hp-login-btn when(@is-new-css = false) {
   .login-btn;
   min-width: 220px;
 
@@ -195,6 +195,11 @@
   }
 }
 
+.hp-login-btn when(@is-new-css = true) {
+  .login-btn;
+  min-width: 220px;
+}
+
 .hp-login-btn-large {
   .hp-login-btn;
 
diff --git a/services/web/frontend/stylesheets/app/login-register.less b/services/web/frontend/stylesheets/app/login-register.less
index 307556ba51..f8c9fd36ce 100644
--- a/services/web/frontend/stylesheets/app/login-register.less
+++ b/services/web/frontend/stylesheets/app/login-register.less
@@ -94,14 +94,6 @@
   }
 }
 
-.login-btn {
-  .btn;
-  .btn-default;
-  position: relative;
-  padding-left: 20px;
-  padding-right: 0;
-}
-
 .login-btn-sharelatex {
   background-color: @brand-sharelatex-color;
   &:focus,
diff --git a/services/web/frontend/stylesheets/components/buttons.less b/services/web/frontend/stylesheets/components/buttons.less
index 13e5d25835..bad8318709 100755
--- a/services/web/frontend/stylesheets/components/buttons.less
+++ b/services/web/frontend/stylesheets/components/buttons.less
@@ -302,3 +302,19 @@ input[type='button'] {
     width: 100%;
   }
 }
+
+.login-btn when(@is-new-css = true) {
+  .btn;
+  .btn-secondary;
+  position: relative;
+  padding-left: 20px;
+  padding-right: 0;
+}
+
+.login-btn when(@is-new-css = false) {
+  .btn;
+  .btn-default;
+  position: relative;
+  padding-left: 20px;
+  padding-right: 0;
+}