taxonomy troubles

I am creating a lot of Custom Post types for a site and I am getting into a bit of a muddle when trying to display taxonomy tags as links on various pages. If I explain one I have made for a Staff page to organise the various departments

Custom Post Type is ‘wggbteam’
I have added a custom taxonomy to this called ‘staff-area’

In the ‘staff-area’ there are three categories: ‘head_office, ‘craft_reps’, ‘regional_reps’

I have made a staff-template.php which introduces the staff and then all I want is to have the three Categories from the ‘staff-area’ at the bottom as links to go to a page showing all members of staff in that category.
I understand I need to create templates for displaying but I cannot seem to get the right code for the first link.

The below code works as a list

<?php
$terms = get_terms( 'staff-area' );

echo '<ul>';

foreach ( $terms as $term ) {

    // The $term is an object, so we don't need to specify the $taxonomy.
    $term_link = get_term_link( $term );

    // If there was an error, continue to the next term.
    if ( is_wp_error( $term_link ) ) {
        continue;
    }

    // We successfully got a link. Print it out.
    echo '<li><a href="' . esc_url( $term_link ) . '">' . $term->name . '</a></li>';
}
echo '</ul>';
?>

But I want them as buttons so on their own, any ideas? I may just be getting the wrong terminology