UX: style tweaks for FAB button

desktop/desktop.scss

@@ -87,31 +87,51 @@
 
 //New Topic Fab
 #create-topic.btn-default {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include buttonShadow;
+  @include buttonTransition;
+  padding: 0;
+  margin: 0;
+  width: 63px;
+  height: 63px;
   border-radius: 40px;
   position: fixed;
   bottom: 30px;
   right: 50px;
   z-index: 999;
-  padding: 24px 20px 22px 5px;
   background-color: $tertiary;
-  color: $tertiary;
+  color: $secondary;
   white-space: nowrap;
-  text-indent: 10px;
-  @include buttonShadow;
   overflow: hidden;
-  width: 63px;
-  height: 63px;
-  @include buttonTransition;
+  .d-icon {
+    margin: 0;
+  }
+  .d-button-label {
+    display: inline-block;
+    transition: all 0.3s;
+    margin: 0 0.25em;
+  }
+
+  &:not(:hover):not(:active):not(:focus) {
+    .d-button-label {
+      opacity: 0;
+      width: 0;
+      margin: 0;
+    }
+    .d-icon {
+      margin: 0 0.25em;
+    }
+  }
 }
 
 #create-topic.btn-default .fa-plus {
-  color: white;
+  color: $secondary;
 }
 
 #create-topic.btn-default:hover {
-  text-indent: 8px;
   width: 190px;
-  color: white;
 }
 
 //Reply Fab
@@ -136,7 +156,7 @@
 
 //Increase size of reply icon
 .widget-button.btn.create .fa-reply {
-  color: white;
+  color: $secondary;
   font-size: 20px;
 }
 
@@ -199,7 +219,6 @@
   #create-topic.btn-default {
     right: initial;
     left: 50px;
-    padding: 24px 5px 22px 20px;
   }
   .widget-button.btn.create {
     left: initial;