Fix custom protected branch pattern jumping scroll position to top

What does this MR do?

Fix creating custom/pattern protected branch jumps your scroll position to the top of the page.

Use more semantic <button> element and prevent the form from submitting.

EE MR: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1523

Are there points in the code the reviewer needs to double check?

• Refactoring out the dropdown link styles into its own mixin

Why was this MR needed?

1. Visit group/some-project/settings/repository
2. Scroll to the "Protected Branches" section
3. Click the "Branch" select box and enter your own pattern like protected-*
4. Click the "Create wilcard protected-*" button
5. Notice how you are scrolled to top and have a empty hash fragment # in the URL

Does this MR meet the acceptance criteria?

• Tests
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #30149 (closed)