There is an HTML element called <button>
. It can be adapted to act like a link, or can be combined with a link, but it is really meant to submit a form.
What you are more likely looking for is an <a>
link styled as a button.
See CSS Tricks: A Complete Guide to Links and Buttons for various stylizations.
The basic HTML format for a link which opens in a new window or tab is:
<a href="https://www.ads-software.com/showcase/" target="_blank">Showcase</a>
If you have a field on your Pod called link_url
, a Pods template using magic tags might like this:
<a href="{@link_url}">{@post_title}</a>
PHP has many ways to output the same thing, but I generally recommend sprintf or printf:
<?php
printf(
'<a href="%s" target="_blank">%s</a>',
esc_url( get_post_meta( get_the_ID(), 'link_url', true ) ),
esc_html( get_the_title() )
);
All of these will output a link, where _target="_blank"
causes a new tab to open.
See the linked examples for styling it as a button. Most examples will usually add a class for this purpose. But one can also get fancy with attributes or pseudo-elements, for example styling all links with certain text in their URL, or adding an emoji before certain links.
In the case if your current site, you might like something similar to the current theme button classes. Adding class="wp-block-button__link has-accent-color has-text-color has-background has-link-color has-border-color has-accent-border-color wp-element-button"
to a link will apply many of the developer-defined styles for buttons.