Best Examples of “Read More” Buttons

Reading Time: 8 minutes

Updated on:

If you read articles online or work on websites that display content, you are probably already familiar with several uses of read more buttons. The traditional use of a read more button allows visitors on a blog or website to access articles and other content. Recently, read more options have become a popular way to track continued visitor engagement with and interest in longer content.

There are several different ways to present site visitors with the option to read more. Each option has visual implications and may impact how much time users spend on a page and how likely they are to click on internal or external links featured near a read more option. There are even more options when it comes to the design of read more links or buttons for mobile or desktop views.

We cover five of the best examples of read more buttons in use today, from basic text links to icons, stylized floating or slider elements, and buttons.

How We ​​​​​Chose Our Ratings

Our ratings are based on what we see and experience on the web as well as the opinions of web design experts. When it comes to stylized read more options, icons, and buttons, the design of these elements is entirely up to the designer. Even the best read more options can be used in ways that are more or less user friendly or that contribute to the overall aesthetic and usability of a blog or site or detract from these factors. Ultimately, the best way to use the top five read more options and the success of any of these approaches depends on the designer.

Top 5 Read More Buttons

There are two general types of read more options with slightly different functions.

The first type directs traffic from the main page of a blog or website, or a page that aggregates different categories or types of posts, toward subpages with full text or multimedia content. This option, which consists of an internal link to read more on a specific page of a site, has been a feature of the internet for a long time. Most blogs allow visitors to read abstracts or blurbs of posts to determine whether they want to click to “read more,” referring the full article that is only previewed on the main page.

As most links are now shared directly via social media and messages, most users do not opt to read more from a link on the front or main page of a website. A newer use of the read more button responds to this shift in browsing patterns. These buttons now appear on subpages, particularly those with lengthy text content, after a user has scrolled down a certain distance. These read more buttons allow site owners to keep track of clicks at a set position on a page of content.

Read more options on content subpages may be stylized and displayed surrounded by internal links to other relevant site content and external links to advertisers. Although opinions on read more options vary among designers and users, it is undeniable that these buttons can encourage clicks of one kind or another. Depending on whether a site uses lazy loading, these buttons may also help to speed up loading times, especially on mobile devices or over slow connections.

Hypertext Link

These links work for pages that combine text and images. If a web designer doesn’t want a read more icon or button image to distract from the other images or style choices on a page, he or she may simply use a text link. Several leading web design experts point out the importance of distinguishing the appearance of these local links from generic links, which lead to other websites.

A simple hypertext link approach to read more options can be useful on pages that aggregate content, such as the front page or a category page on a blog or website. These links should lead to internal subpages on your site, making it easy to direct visitors to the main page to content and track page views.

2. Read More Buttons

Buttons

This eye-catching approach to providing visitors with the option to read more relies on linked button images. Buttons are likely to catch the attention of readers, but they can easily overwhelm the design of a site with other visual elements. While a button may be easier for mobile device users to click on, it may also dominate the screen and distract visitors from other content or information.

It is best to use buttons to encourage users to click on the most important content or guide them toward conversion opportunities on a website. Buttons may appear on the main page, subpages, or in pop-up windows. You probably do not want to use buttons to allow users to read more of a variety of articles. Hypertext links are less eye-catching but also help to keep visitors’ focus on site content and overall design. The presence of too many buttons can make too many demands on a visitor’s attention or make a site look unsophisticated.

3. Read More Icons

Icons

Read more icons occupy the middle ground between basic hypertext links and larger buttons. Situating an icon next to a local link with the option to read more can help to catch users’ eyes in a more subtle way than a prominent button. This option is also best suited for lists of articles on a front page or aggregations of certain articles. You may also use read more icons on links found at the bottom of a content subpage.

Even though icons are smaller than most read more buttons, the more colorful or eye-catching these images are, the more likely they will be to detract attention away from the primary content on the page on which they appear. For this reason, it is best to use these icons to draw visitors’ attention toward hypertext links on pages that bring together site content.

4. Read More Stylized Elements

Stylized Elements

Depending on the theme or style sheets on a site, a web designer may want to code or add a widget that introduces elegant floating elements that allow users to choose whether they would like to read more of a long piece of content. This newer use of read more buttons works better on content pages than the front page, unless you display full articles on the main page.

This method of presenting visitors with the option to read more can be integrated with local links to other relevant content on the site or external links to advertisers. Even if users have lost interest in reading more of the article that brought them to this point of the page, a skilled designer may be able to direct traffic to other subpages or sponsors. Clicks on these links also indicate that visitors have spent some time on the page and that they intend to remain to finish reading the content.

5. Read More Subpages

Subpages

Another older version of the read more option is simply loading text or multimedia content across multiple subpages. Even though page navigation arrows or numbers do not state that users can “read more,” this activity is implicit. Breaking up long content into pages can interrupt the flow more than a read more element that allows a user to see more of the same page they are already reading.

Depending on the style and layout of a site, a web designer can present subpages as options to read more. No matter which method you choose, the goal of read more buttons is to make the process of navigating content as flowing and natural as possible. At the same time, these options also provide unique opportunities to direct visitors’ attention toward related site content or sponsored links.

Read More Button Selection Guide

The right read more button can help to structure lengthy content on a site or blog. This button allows an article or post to load in stages, and can also be used in conjunction with advertisement and local link placement. The method of showing a read more option that a designer chooses can significantly affect users’ experience on a site and how long they remain on a page. Here are a few factors to consider when selecting a read more button that may inform the way in which you use these options or the style of read more buttons you choose.

When To Use a Read More Button

The most obvious answer to this question is whenever you have content long enough that it is good design to offer readers the option to read more. Visitors who are interested in a topic will keep scrolling down a page to continue reading an article or post. Whether you want to control loading times or provide more visibility for internal and external links, you may decide to insert a read more button, element, or option after one or more paragraphs.

A read more button can be helpful for keeping track of clicks to determine user interest in content. Even though these buttons may interrupt the flow of reading, they can provide valuable insights into site usage. Place these buttons in strategic locations to determine how many readers keep scrolling down a page to continue reading content.

How To Redirect Wit​​​​h a Read More Button

A read more button can direct users toward other content on a site. Once visitors have read the early portion of an article or post, they may be more likely to follow local links located near a read more button instead of continuing. This is especially the case if you use a stylized element that displays other content or advertisements near the read more option.

Using a Read More Button To Compress Content

Read more options can also help to promote faster page loads, especially on mobile devices. Some sites actually rely on a lazy load to limit the amount of content that is initially displayed, while others simply hide the rest of the article until a visitor clicks the read more button.

Enticing Readers With a Read More Button

Read more options can increase readers’ interest, particularly if an article is written and displayed in a way that captures their attention. This is not an excuse for content creators to bury the lede but encouragement to engage visitors in the first quarter or half of a longer body of text or collection of multimedia. Ideally, visitors should consider the option to read more as an invitation to find out something that the beginning of an article or post has made them want to know.

The Best Read More Button

There is not a single type of read more button that stands out above the others. The best option depends on the type of content on a page and the layout of the page. Web designers should determine which approach to presenting visitors with the option to read more is most convenient and draws the most clicks on each website and subpage.

On the front page, designers should consider whether they want users to click on a linked title or image or a read more option. Designers should also factor in the responsiveness of read more options for mobile viewing. Buttons and floating elements may be easier for mobile device users to select than text links.

There are a variety of read more buttons that web designers may want to use on the main or content pages of a site. Make sure to choose options that fit stylistically with the look and feel of the page and allow users to interact with the linked button, element, or text as naturally as possible. A growing number of sites have begun to use read more options to track continued engagement with longer content. These buttons and the various ways you can present them can help to direct web traffic in ways that are conducive to the interests of advertisers, site owners, and users.