Material-ui: [Button] Update the implementation to match the specification when outlined

[oliviertassinari]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

We match the specification. It could also be the opportunity to make the implementation more customizable friendly.
https://material.io/guidelines/components/buttons.html#buttons-flat-buttons

Current Behavior

We don't follow the spec.

Steps to Reproduce (for bugs)

1. Click on a button and compare the result with the specification.

Context

material-web-components seems to implement the animation correctly. cc @kof

Closes #7537

Your Environment

| Tech | Version |
|-----------------|---------|
| material-ui | v1.0.0-beta.24 |
| react | v16.2.0 |

[pajaydev]

we should not have the ripple effect on the flat buttons. Correct me if I am wrong.
Can you help me making this change?. @oliviertassinari

[sebald]

@ajay2507 They have it on their official components: https://material-components-web.appspot.com/button.html

[mbrookes]

Not sure where the "Expected Behavior" gif originates, but the spec shows a ripple: https://material.io/guidelines/components/buttons.html#buttons-flat-buttons (scroll to behavior).

[eps1lon]

Could only detect differences in the border color for outlined buttons (they don't seem to depend on the color variant). This should probably be tackled once states are properly implemented. They're currently not consistent.