Button
Last updated
Was this helpful?
Last updated
Was this helpful?
The Button module is an exactly that: an object that you insert into your layout that resembles a physical button.
Traditionally, a web button is a pretty package for a link that sends visitors elsewhere when clicked.
The button can also open a lightbox, which displays a video or any other content that you can insert with a shortcode, HTML, or code such as an <iframe>.
If you're using the Accept Builder Theme, the buttons' initial style comes from the settings at Customize > General > Buttons. The button's default text color is white text for darker accent colors and black text for lighter colors. The default font family for the button text depends on the font family set for the <body> tag.
You can set the button's click action to either a link or a lightbox.
When you set Click action to Link, a Link section opens.
Enter the URL to the link or click Select to choose a page or post from your site.
Set Link target to determine whether the linked page replaces your current page in the same tab ( Same window ) or opens in a new tab ( New window ).
The Link No Follow field tells search engines whether or not to follow the link. The default is No, which tells search engines to follow the link. Yes means "Yes don't follow the link." For more information about when to use nofollow, see the Google webmaster article.
If you choose the Lightbox option, you next choose whether the lightbox will display custom HTML content or play a video from a URL you provide, as described in the following sections.
With the HTML option, an HTML editing box lets you enter custom code such as HTML markup, embed code for a video, or shortcode. In the following screenshot, the shortcode for a saved row containing a Call to Action module was inserted into the HTML box to make an opt-in popup.
Other shortcode examples:
Embed an audio player with audio shortcode.
Use shortcode from a plugin to display the contents of a PDF file.
Insert the URL of the video you want to play in the lightbox, from a service such as Youtube or Vimeo:
This tab has the following settings.
The text that appears on the button.
Optional icon to appear on the button. If you select an icon, there are two additional fields:
Icon position: Before or after the button text.
Icon visibility: The icon can be always visible or appear on hover only.
Link or Lightbox.
If you choose Link, a Link field opens for you to enter a typical URL link to another page or location.
If you choose Lightbox, a Content type option lets you choose either HTML or Video.
For HTML, add any code to display in the lightbox.
For Video, a field opens so you can provide a URL for a video from a service such as Youtube or Vimeo.
The Style tab is shown in the screenshot and described below.
Padding (responsive) Set a specific padding value in pixels. Click the Link icon to automatically make all four padding values the same.
Text color Set the button text color in the resting state.
Text hover color Set the button color on hover. If this setting is left blank, the Text color setting applies for hover also.
Background color Set the fill color for the button in the resting state.
Background hover color Set the button's fill color on hover. If this setting is left blank, the Background color setting applies to hover also.
Background style Flat: consistent fill color Gradient: gradient of the background color, lighter on top and darker on the bottom.
Background animation Disabled by default. If set to Enabled, there's a 0.2-second linear transition from resting state to hover state.
See this article for more information about the settings in the Border section.
There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.
Other modules that include a button:
This module lets you add a group of buttons in a single column. horizontally or vertically.
This module includes a heading, optional text, optional image (photo or icon), and optional button or link text. The link you provide works with any part of the Callout module, not just the button.
This module includes a heading, optional text, and a button. The link you provide works with any part of the Call to Action module, not just the button.
Special settings to set up a contact form, with a button to submit the form.
Special settings to set up a connection to any of a number of mail service providers, creating a form to subscribe with a button to submit the form.
A transparent button means the button's background color is semitransparent or completely transparent. Especially in the case of a completely transparent background color, there's a border around the button. The hover state can also be solid, transparent, or semi-transparent.
Make the button's background color transparent by changing the opacity of the button's Background color setting, using the color picker slider. Then you can create a button border in the Border section. section.
Where the background color and border settings are located depends on the module in which the button occurs:
In the Button module, the Background color setting and Border section are on the Style tab.
In the Callout module, these settings appear on the Link tab when you set Type to Button in the Call to Action section.
In the Call to Action module, Contact Form module, and Subscribe Form module, the settings appear on the Button tab.
Width Auto width: Width adjusts to fit the text and icon. Full width: The width expands to the content area minus the module's margin settings. Custom: You can in px, vw, or %.
Align (responsive) See for a description of how the alignment toggle settings work.
Typography section See about the Typography section settings.
