How do I change blog post "Continue Reading" link to a button?

Overview

This article describes how to replace the default “continue reading” text-link with a button. This modification will be made using WordPress’ built-in code editor. (click screenshots for full-size view)

General Instructions:

    1. Log into your WordPress Dashboard
    2. Click on Appearance > EditorĀ and locate the file named index.php
    3. Edit this file and scroll to approx. line 58 to find this code:
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Change the entire line of code above using one of the new lines of code below.

Black:

<a class="small black tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Blue:

<a class="small blue tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Green:

<a class="small green tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Grey:

<a class="small grey tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Navy:

<a class="small navy tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Orange:

<a class="small orange tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Purple:

<a class="small purple tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Red

<a class="small red tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

Teal:

<a class="small teal tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

White:

<a class="small white tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>

If you wish to have a larger button, then change small with large within the class.

Example:

Large White:

<a class="large white tt-button" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo $blog_excerpt_link; ?> →</a>