Currently I'm redesigning one of my personal projects. The website has a lot of blog items which need a 'read more' button. When viewing material design layouts you see a round button with a plus sign but are people even familiar with it? And how would you recommend to use the 'read more' option?
There are 2 different cases:
1. You have a page with multiple blog post excerpts:
Solution: You can only use a
or a flat button
2. You only have one blog post on the page that's shortened
If it's the main action on the page, you can safely use a floating action button
Though the information in the accepted answer may have been accurate at the time, I don't think it adequately answered the question. The current Material documentation explains the use of each button quite clearly:
The Floating action button (+), "represents the primary action in an application". It's frequently used in app to "add" something, like a new chat (Hangouts, Whatsapp), a new email, or a new note (Keep, Evernote). I can't find any evidence of it being used as a "Read More" button, and since you usually have multiple cards with "Read More" links, it would not be considered the primary action of a page.
The Raised button may end up appearing too prominent, depending how you've styled your blog post (Examples can be found in the Cards docs). If your post previews or summaries are in cards, you shouldn't use a raised button. If they are not cards, raised buttons could be suitable to catch attention after a chunk of text in a flat layout.
This leaves the Flat button, which I believe is the correct one to use if you are displaying your content in cards. You can find examples of this in the Cards documentation, where there is a card with a "Learn More" link in the Actions section.
- Material Design Components - Buttons
- Material Design Components - Floating Action Button
- Material Design Components - Cards
You could also look at the documentation for Lists and Grid lists if you don't need to display the amount of information that a Card would.