Agent Focused Pro 2 Theme Setup

  1. Home
  2. Docs
  3. Agent Focused Pro 2 Theme...
  4. Extras
  5. How to Add a Button

How to Add a Button

If you are using the block (Gutenberg) editor to edit a page, you will find one or more button blocks. They make it easy to add a button with a link.

But, if you need to edit a page using the classic editor, or add a button in a widget, here's how to change any link into a button by adding a CSS class.

In WordPress, go to edit the page or widget.

  1. First add some text, and use the link icon to add a link to the text.
  2. Next, switch to the Text tab in the editor.
  3. Add this to the link - class="button" - see gist below.
  4. Switch back to the Visual tab in the editor.
  5. Save.

If your link looks like the top line,
then add - class="button" so it looks like the second line.

<a href="">Button Text</a>
<a class="button" href="">Button Text</a>

And you will see:
Button Text