Best Examples Of Read More Buttons For Web Designers And Bloggers

Web designers and bloggers alike all understand how difficult it is to entice potential site visitors to stick around for a while. We only have a few seconds to attract a visitors’ attention and the persistent awareness that it could be lost at any moment.

There are many factors that go into grabbing and holding a visitors’ interest. A lot of energy and thought have to go into creating valuable and relevant content, high design quality, eye-catching headlines, and engaging media.

With so many things to work on you can miss the small details that make an impact on the website if forgotten. In this article we’ll narrow in on a very specific part component of the website – the “Read More” or “Continue Reading” link. This link is usually found following a summary or a headline in an article. 

Why Is The “Read More” Link So Important?

We’re glad you asked. According to Christina Goodwin at Stop, Drop, Scroll, “Read More” links are distracting, discourage her from continuing the article, and leave the site altogether.

Read more buttons

She also says that she understands that these links allow for the publisher to present more than one article at once and perhaps give the readers the option to just read the summary or headline if they should choose. She theorizes that perhaps these links help to limit how much data is loaded on a page at once.

She makes some pretty good arguments. These arguments could be met and solved with better, intentional design and placement. She is right about her theory that “Read More” buttons and links do help “compress content on the home page,” according to Smashing Magazine.

And, yes, this compression does have the effect of allowing for more content to be placed in the same space allowing for visitors to scroll past headlines more quickly. The links do make it easier to track which articles are getting the most traffic. Putting entire articles on a homepage would make this tracking less certain and more difficult.

Read more buttons

Of course, there is the monetization issue. The fact is that the more users click on links, the more likely they are to click on advertisements. This is vital information for websites that depend on traffic for monetization as “Read More” links double or triple the page views making the sites more attractive.  

Designers need to keep both the needs of the user and the website owner when designing the “Read More” buttons or links. Here are the best examples of “Read More” buttons and link designs.

How We Chose Our Ratings

We’ve ranked these examples based on their incorporation of “Read More” links, design of the links or buttons, and visitor response to the links. We want to be sure that the examples are high-quality and we give you a clear idea on how to properly design your own “Read More” buttons or links for increased traffic and better tracking of the traffic.

The examples are ranked on a 5/5 scale and are real websites that you can view. Let’s jump in to the best examples of “Read More” link designs.

Top 7 Best Examples Of Read More Buttons

This list is has a mixture of examples of websites that use “Read More” icons, “Read More” links, and “Read More” buttons.

1. Tutorial9

The most popular presentation of the “Read More” link is the phrase written in simple text and underlined. It is usually in bold and presented in a flashy color. Sometimes its followed by a > sign for extra emphasis.

Tutorial9 approach for read more buttons

Overall Rating: 5 out of 5

This is the approach taken by Tutorial9 who present the link net to its comment link. The article excerpt itself is only a few sentences long and the article headline is displayed in a bold yellow. The effect is a simple clean presentation that presents the link in a clear, but laid-back way.

2. The White House

Next on our list is the White House blog. Many designers overlook the importance of making their “Read More” link distinguishable from the rest of the article for easy identification. This would be especially easy to overlook on a blog that has to be purposely conservative, subdued, and minimalistic.

The White House

Overall Rating: 4.8 out of 5

The White House website presents their “Read More” link stand out by inserting it a bit after the end of the article summary, making good use of negative space. They further enhance the link by underlying the link and presenting it in all caps. They maintain the restrained design of the website by making the link a slightly lighter blue then the headline and keeping the summary a traditional black with clean typography.

3. Huffington Post

Huffington Post is one of the most popular sites for liberal American political news and opinion in the world. One of the reasons for its popularity is the consistency of the website aesthetics. The team behind the site considers every detail of the website carefully, including the “Read More” link.

Huffington Post

Overall Rating: 4.8 out of 5

Huffington Post places its link about a half inch after the article summary. The link is a traditional black color but is bolded and placed to the right of the lighter colored “Comment” link. It maintains its visibility without being obtrusive.

4. Design Reviver

Sometimes a simple link is not enough, especially if the design of your website is a bit flashier then the websites listed above. Icons work great with more interactive web designs or sites with darker backgrounds.

Design Reviver

Overall Rating: 4.5 out of 5

This is the case for Design Reviver website which places “Read More” in white typography inside of a small black rectangle at the bottom of a large summary. The large summary which extends to cover the entire width of the home screen would make it difficult for a simply designed link to be seen.

5. The New Potato

A popular site for food, fashion, and lifestyle the New Potato which uses a very strong image-driven approach to its presentation. Each article on the site is highlighted with a large photo and a short, two-sentence description.

The New Potato

Overall Rating: 4.5 out of 5

A “Read More” link is scrolled in a small, italicized, black typography one centimeter below the description. This design choice maintains the chic design of the website. It would be a bit more effective if the link was bolded.

6. Nerd Fitness

A website with fitness as its focus and everything nerd as its motivation, Nerd Fitness has the aesthetic of a superhero comic. For this reason, a “Read More” link would not be too subtle to stand-out in this formidable design.

Nerd Fitness

Overall Rating: 4 out of 5

To combat this and the generally large, unique typography on the site, the creators have placed a “Continue Reading” icon at the end of an extensive article excerpt on the lower right side.  The color of the text is white and placed inside of a long and thin and very red rectangle.

The placement is very effective and the large excerpt addresses Godwin’s concern that placement of the icon in most articles are too high and discourage readers. The general design of the site, however, is a bit on the heavy side.

7. Real Mac Software

The independent, award-winning company known for its Mac application, Rapid Weaver, has a flashy design to its website. The website is effects and image heavy with lots to draw the user away from its own twist the “Read More” button.

Instead it has a big, bright blue “Learn More” button after the short description of what the company is known for, Rapid Weaver. Claiming “The Best Web Designer for Mac. No Code Required.” Yep, it definitely needed the big, blue button.

Real Mac Software

Overall Rating: 3.5 out of 5

While buttons will certainly stand out, it’s best to use them sparingly so you won’t overwhelm your audience. Overall, it seems that links are more effective and less jarring to the potential visitor as long as it is well placed and can be distinguished from the surrounding text and design.

If your design doesn’t allow for a simple design then your next step is to try icons. The icons themselves can be subdued in size yet can be a bright color that will stand-out easily against a more complex overall website design.

Keeping Up With The Times

Before beginning the design for your “Read More” link it’s good idea to do some research. Look at websites similar to the ones you are designing so you are aware of any trends that are currently happening. Some trends that are immediately apparent from the examples above are that users prefer links rather than icons and buttons.

Another trend is that blogs tend to use links and icons, while corporations and businesses use buttons more frequently. This may be because businesses feel that the flashier buttons are more effective in attracting visitors, but, as the numbers seem to show, this is not the case. 

Website

Details

Ratings

Tutorial 9

  • Simple text
  • Underlined in a flashy color

The White House 

  • Purposely conservative
  • Subdued and minimalistic

Huffington Post

  • Traditional black color 
  • Light colored text

Design Reviver

  • White typography
  • Small black rectangle

The New Potato

  • Scrolled in a small italicized text
  • Black typography

Nerd Fitness

  • Unique typography 
  • Text is white
  • Placed inside of a long and thin and very red rectangle

Real Mac Software

  • Bright blue button
  • Flashy design

Buyer’s Guide – How To Choose Your “Read This” Design

Let’s look a little deeper at what the trends are when it comes to using “Read More” links. Ramona Sukraj from ImpactBND seems to agree with Goodwin that “Read More” links can be a turn off. Referring to them as high-friction verbs, or verbs that imply an obligation or work that a user just doesn’t want to do, these links can drive the visitor away from the site.

So how do we fix it? Sukraj offers some advice to make this CTA, or call-to-action, less abrasive to visitors. Before exploring your options, however, she suggests compiling a clear picture of your ideal visitor’s persona. We agree that this is sound advice.

Once this list is compiled, you can start looking at alternatives if you determine another version of the “Read More” link is best for your potential visitor.

She offers some alternate suggestions, such as:

  • View More
  • Get My Article
  • See What Happens Next

These phrases promise to fulfill a curiosity rather then telling the reader to work or perform a task.

We’ve covered the viewpoint of the potential user and that of the web designer, explored the different effective examples of the traditional use of the “Read More” buttons, and looked at the alternatives should the traditional forms not work for your specific potential visitors.

Armed with this information you will be able to choose a design that works for your website and your visitors, increasing conversion rates and the tracking of those visitors. But at the end of it all, you are only limited by your creativity and ability to think up a design that works best for the website you are working on. If you like the design you think up then your “Read More” design will probably work for the website as well.

Consider these Available Items