docs: add hover effect to pfbar ctas

Author: zeroedin

docs/_snippets/pf-bar-html.md

@@ -1,5 +1,7 @@
 <div class="pf-bar">
-  <a href="https://www.patternfly.org/" class="cta">PatternFly.org</a>
+  <a href="https://www.patternfly.org/" class="cta">
+    PatternFly.org
+  </a>
   <a href="https://github.com/patternfly/patternfly-elements" class="cta">
     <pf-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-icon>
     Contribute on Github

docs/home.css

@@ -45,7 +45,7 @@
 }
 
 #home-header a.cta.primary:hover {
-  --pf-cta--Color--hover: white;
+  --pf-cta--Color--hover: var(--pf-theme--color--white, #fff);
   --pf-cta--BackgroundColor: transparent;
 }
 

docs/main.css

@@ -109,7 +109,6 @@ section.band.overview + section.band {
 }
 
 
-
 a.cta {
   white-space: normal;
   display: inline-block;
@@ -351,15 +350,19 @@ main.blog {
   height: 100%;
 }
 
+.pf-bar a:hover {
+  color: var(--pf-theme--color--white, #fff);
+}
+
 .pf-bar a.cta:not(.primary):not(.secondary)::after {
   background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.56 31.56' %3E%3Cpath d='M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-.pf-bar a:hover {
-  color: var(--pf-theme--color--white, #fff);
-  text-decoration: underline;
+.pf-bar a.cta:hover:not(.primary):not(.secondary)::after {
+  translate: 6px;
 }
 
+
 .logo-bar {
   --pf-navigation--Height--actual: 70px;
   display: flex;