fix: button style

[HeleenSG]

Changes

• Hover state border 1px instead of 2px.
• Grey border instead of colored borders
• Check if border color is correct

Adds destructive ghost button styling

Issue link

Closes #3040

Demo

Different states: Destructive ghost button with hover. Hover state on ghost button.

QA notes

• Please check if implementation is according to design: https://www.figma.com/design/MDbpc9K0qjyaoRGAGiDX6t/%F0%9F%8E%A8-KAT-%7C-Design-System-%7C-Components?m=auto&node-id=133-2
• Please check if hover state works as designed

---

Code Checklist

• All the commits in this PR are properly PGP-signed and verified.
• This PR only contains functionality relevant to the issue.
• I have written unit tests for the changes or fixes I made.
• I have checked the documentation and made changes where necessary.
• I have performed a self-review of my code and refactored it to the best of my abilities.

• Tickets have been created for newly discovered issues.
• For any non-trivial functionality, I have added integration and/or end-to-end tests.
• I have informed others of any required .env changes files if required and changed the .env-dist accordingly.
• I have included comments in the code to elaborate on what is not self-evident from the code itself, including references to issues and discussions online, or implicit behavior of an interface.

---

Checklist for code reviewers:

Copy-paste the checklist from the docs/source/templates folder into your comment.

---

Checklist for QA:

Copy-paste the checklist from the docs/source/templates folder into your comment.

[underdarknl]

Did we need more commits on this?