fix: enhance Button component with hover effects and styling. also re… (#1393)

Author: shinobiwanshin

docs/src/components/GitHubButton/index.tsx

@@ -9,23 +9,14 @@ type ButtonProps = {
 };
 
 function Button({ href, children, margin = '0' }: ButtonProps): ReactNode {
-    return (
+  return (
         <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{
-                display: 'inline-block',
-                padding: '8px 12px',
-                margin: margin,
-                borderRadius: '4px',
-                textDecoration: 'none',
-                border: '1px solid #ccc',
-                color: 'var(--ifm-color-default)',
-                fontSize: '0.85rem',
-            }}
-        >
-            {children}
+        href={href}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='button-interactive'
+    >
+        {children}
         </a>
     );
 }
@@ -38,7 +29,7 @@ type GitHubButtonProps = {
 function GitHubButton({ url, margin = '0' }: GitHubButtonProps): ReactNode {
     return (
         <Button href={url} margin={margin}>
-            <FaGithub style={{ marginRight: '8px', verticalAlign: 'middle', fontSize: '1rem' }} />
+            <FaGithub className='icon-button' />
             View on GitHub
         </Button>
     );
@@ -52,7 +43,7 @@ type YouTubeButtonProps = {
 function YouTubeButton({ url, margin = '0' }: YouTubeButtonProps): ReactNode {
     return (
         <Button href={url} margin={margin}>
-            <FaYoutube style={{ marginRight: '8px', verticalAlign: 'middle', fontSize: '1rem' }} />
+            <FaYoutube className='icon-button' />
             Watch on YouTube
         </Button>
     );

docs/src/css/custom.css

@@ -215,3 +215,36 @@
   margin-right: 40px;
 }
 }
+
+ .button-interactive{
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-decoration: none;
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: var(--ifm-button-border-radius, 4px);
+  color: var(--ifm-color-primary);
+  background: transparent;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.button-interactive:hover,
+.button-interactive:active,
+.button-interactive:focus{
+  color: #fff;
+  background-color: var(--ifm-color-primary);
+}
+
+.button-interactive:focus-visible{
+  outline: none;
+}
+
+/* Icon spacing */
+.icon-button,
+.button-interactive svg {
+  margin-right: 8px;
+  vertical-align: middle;
+  font-size: 1rem;
+}