Fix button inconsistencies and macOS layout shifts

This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.

Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.

Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.

This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -64,6 +64,8 @@ export default defineComponent({
 }
 
 .button {
+  @include reset-button;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -72,13 +74,13 @@ export default defineComponent({
   color: $color-on-secondary;
 
   border: none;
-  padding:20px;
+  padding: 20px;
   transition-duration: 0.4s;
   overflow: hidden;
   box-shadow: 0 3px 9px $color-primary-darkest;
   border-radius: 4px;
 
-  &__icon {
+  .button__icon {
     font-size: 2em;
   }
 

src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue

@@ -4,11 +4,7 @@
     <code ref="codeElement"><slot /></code>
     <div class="copy-action-container">
       <TooltipWrapper>
-        <AppIcon
-          icon="copy"
-          class="copy-button"
-          @click="copyCode"
-        />
+        <FlatButton icon="copy" @click="copyCode" />
         <template #tooltip>
           Copy
         </template>
@@ -20,13 +16,13 @@
 <script lang="ts">
 import { defineComponent, shallowRef } from 'vue';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
-import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { injectKey } from '@/presentation/injectionSymbols';
+import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
 
 export default defineComponent({
   components: {
     TooltipWrapper,
-    AppIcon,
+    FlatButton,
   },
   setup() {
     const { copyText } = injectKey((keys) => keys.useClipboard);
@@ -73,12 +69,6 @@ export default defineComponent({
   .copy-action-container {
     margin-left: 1rem;
   }
-  .copy-button {
-    @include clickable;
-    @include hover-or-touch {
-      color: $color-primary;
-    }
-  }
   code {
     font-size: 1rem;
   }