2

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?

Improve this question

2 Answers 2

Reset to default
3

There are 2 different cases:

1. You have a page with multiple blog post excerpts:

Solution: You can only use a

raised button

Raised button

or a flat button

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

Floating action button

Reference: http://www.google.com/design/spec/components/buttons.html

Improve this answer
4
  • @rwzdoorn Glad it was helpful :)
    – Vince C
    Jun 8, 2015 at 13:12
  • 1
    Even with only one button, the FAB is misleading. It's almost always used to be an action of adding something, rather than reading.
    – Andy Mercer
    Aug 26, 2016 at 14:31
  • 1
    In which case replace the plus sign with a reading-glasses icon/SVG. I believe the principal was in a less intrusive button, with little to no text as compared to "Read More"
    – Leviscus Tempris
    Aug 29, 2016 at 8:08
  • @AndyMercer Yes, it is mostly, but not exclusively, used for adding something. However, according to the specs (material.google.com/components/…), the FAB can be safely used for prominent non-destructive actions.
    – Vince C
    Sep 5, 2016 at 11:40
3

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.

Sources:

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.

Improve this answer
1
  • 1
    Great extended explanation of my answer.
    – Vince C
    Sep 5, 2016 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.