Update class name and improve transition

The class name showBtn uses a camelCase naming convention and CSS
selector names use the kebab-case naming convention. The z-index
solution is not needed if we hide the element with visibility. Using
both opacity and visibility allows the transition to be elegant.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie555f958daaadd2bc3a3777b6c2bc7d5e83a0cc5
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index b2c5448..95e7404 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -2,7 +2,7 @@
   <b-button
     id="scrollToTopBtn"
     class="btn-top btn-icon-only"
-    :class="{ showBtn: showButton }"
+    :class="{ 'show-btn': showButton }"
     variant="secondary"
     :title="$t('global.ariaLabel.scrollToTop')"
     :aria-label="$t('global.ariaLabel.scrollToTop')"
@@ -49,17 +49,20 @@
   position: fixed;
   bottom: 24px;
   right: 24px;
-  z-index: -1;
+
   box-shadow: $box-shadow;
+  visibility: hidden;
   opacity: 0;
   transition: $transition-base;
+  z-index: $zindex-fixed;
+
   @media (min-width: 1600px) {
     left: 1485px;
     right: auto;
   }
 }
-.showBtn {
+.show-btn {
+  visibility: visible;
   opacity: 1;
-  z-index: $zindex-fixed;
 }
 </style>