User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
In the MD specifications are listed two types of buttons:
the flat buttons are usually with black text, making them look like simple not clickable text (for someone).
Isn't it a bad design pattern? Shouldn't buttons always stand out from the simple text?
It's a bad design pattern in the context of the example...where there's just text floating in space by itself. But in context, it maybe a perfectly valid design pattern. Controls have their own affordances (or lack thereof) but also gain (or lose) affordance based on the context they are placed in as well.
This is why it's a challenge to build pattern libraries sans the context of the actual pages said patterns will be used on.
They're very bad UX, and the main reason of opposition to Material Design as a whole. To answer your specific question and why they do it:
Raised buttons behave like a piece of material resting on another sheet—they lift and fill with color on press.
Flat buttons are printed on material. They do not lift but fill with color on press.
Button text should be all caps in languages that have capitalization. For languages that don’t have capitals, consider using colored text for flat buttons to make them stand out from normal text.
Basically, they're stuck on the paper concept, as if computers are paper. Furthermore, the raised buttons are even worse: they get more depth AFTER being pressed, which collides with almost any usability study to date.
All this being said, it's not correct that the links have to be black, your image is a monochrome example, but for colors on buttons, you need to relate to Material Design Color section. Furthermore, from the same page you took your image:
(and many more)
Finally, remember Material Design is a set of guidelines, not some kind of restrictive law. For example, I use Material Design A LOT, so we built a specific Material Design sets of scripts and style sheets. One of the things we do is to use raised buttons exactly opposed to Material Design recommendations. And we tracked and tested it and it works way better than what they recommend, no matter what Google says.
In short: there are reason for Google to do what they do. It doesn't mean you have to follow that
In practice, these buttons generally do stand out—they're often presented in a contrasting color, all caps (as opposed to standard text), and they're located in a separate place from paragraph text. (You wouldn't use these buttons in the context of a paragraph.)
The theory behind the appearance of this kind of button comes from Gestalt psychology. Being all caps gives a semblance of a rectangle, as the bottoms and the tops of each letter align. Being styled differently and positioned separately from content indicates that it's a different kind of element. Color hints at interactivity.
This isn't the only kind of element using these principles. Links have been relying on these kinds of subtle hints for ages. And if you look at the Material Design text field, you'll see that it uses a line and a label (or hint text) to give the semblance of an empty box to be filled.
