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.

tests/unit/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.spec.ts

@@ -7,9 +7,9 @@ import { Clipboard } from '@/presentation/components/Shared/Hooks/Clipboard/Clip
 import { UseClipboardStub } from '@tests/unit/shared/Stubs/UseClipboardStub';
 import { ClipboardStub } from '@tests/unit/shared/Stubs/ClipboardStub';
 import { expectExists } from '@tests/shared/Assertions/ExpectExists';
+import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
 
 const DOM_SELECTOR_CODE_SLOT = 'code';
-const DOM_SELECTOR_COPY_BUTTON = '.copy-button';
 const COMPONENT_TOOLTIP_WRAPPER_NAME = 'TooltipWrapper';
 
 describe('CodeInstruction.vue', () => {
@@ -35,7 +35,7 @@ describe('CodeInstruction.vue', () => {
       });
       wrapper.vm.codeElement = { textContent: expectedCode } as HTMLElement;
       // act
-      const copyButton = wrapper.find(DOM_SELECTOR_COPY_BUTTON);
+      const copyButton = wrapper.findComponent(FlatButton);
       await copyButton.trigger('click');
       // assert
       const calls = clipboardStub.callHistory;