[Button] - Inverted primary & secondary don't display properly

[y0hami]

Description:
When creating a inverted button the coloured buttons (green, blue, yellow etc.) all work correctly but the primary and secondary buttons do not.

Steps to recreate:

1. Create button with ui inverted primary button or ui inverted secondary button

Expected result:
The button should be outlined with the primary or secondary colour and when the user hovers over it should be filled with the primary or secondary colour.

Actual result:
The button is filled with the primary or secondary colour and has a little corner border (very hard to see)

Browsers:
I have tried this on these browsers (OS: Win10 14393.0):

Browser	Version	Status
Chrome	60.0.3112.90	Broken
Firefox	48.0.2	Broken
Opera	46.0.2597.57	Broken
Edge	38.14393.0.0	Broken
IE	11.0.14393.0	Broken

Image:

Test case:
https://jsfiddle.net/hammy2899/pc13yp7f/1/

[stale]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!