Button blocks using outline style in old markup render incorrectly

[andrewserong]

The fix for Buttons using old button markup worked for me in testing normal buttons, but buttons with an Outline style are currently rendering with an additional border / displaying in unexpected ways.

To reproduce
Steps to reproduce the behavior:

1. In WordPress 5.4 create a Buttons block and add in a few buttons using the Outline style
2. Also, add in the following (legacy) Button markup to a post/page:

<!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background-color" href="/contact">Get in touch</a></div>
<!-- /wp:button -->

2. Publish the post and ensure that the buttons render correctly with their outline styles
3. Install / update Gutenberg plugin to 7.9.1
4. View the post/page, the button container is rendered with an outline

Expected behavior
The legacy existing markup to continue to render Button blocks with outlines in a backwards compatible way.

Screenshots
I tested this out in a few different themes available in .org, here are screenshots from a couple of themes listed as Popular:

Hestia

Lorina

2019

Editor version (please complete the following information):

• WordPress version: 5.4
• Gutenberg plugin: 7.9.1

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 81

Additional context

• Button markup previous fix: Fix buttons styling for old markup #21642
• Similar issue to: Buttons alignments break when updating to recent version #21707 and Button Block: Backwards compatibility floating doesn’t work properly #21685

CC: @youknowriad @alshakero