Button Component

Bring attention to a link with this customizable image.

Using This Component

Add the component to the page. There are two tabs, Button Linked and Advanced.

The component as it first appears on the page.

The component as it first appears on the page, showing the default "Learn more" text in a gray box.

This component can be placed in the page header, main body or in the right sidebar. It can also be used on a homepage. When it is first placed on the page, the default "Learn more" text is displayed, in a gray box.

Note: the Button component uses CSS3 and may look slightly different depending on the Web browser being used.

Button Link Tab

Button Text - Type the wording you want displayed on your button (Learn More is the default text).

Additional Label Text - Allows for a longer description to assist screen readers to give more context for repetitive buttons on the same page.

Link - Enter a URL here to turn the title into a clickable hyperlink. Use the magnifying glass to browse for a target page within the UBCMS.

Open in new window - This optional setting forces the clicked link to open in a new browser tab or window.

  • When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.
  • If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server.
  • Read more about link labels.
The component opened for editing showing the Button Link tab settings.

The component opened for editing showing the Button Link tab settings.

Advanced Tab

The Advanced tab allows you to customize the component by choosing the width and color.

Width - Choose from:  

  • Width of Text (default, buttons appear side by side)
  • Full Width (buttons stack vertically) *
* Full width will fill the available space.

Button Color - Choose from:

  • Gray (default)
  • Blue
  • Orange
  • Green
  • White
  • Yellow **

** Yellow was added for use in emergency communications, to supplement the Issues Advisory Banner.

Note: An older version of this component had settings for shapes and text alignment, but these will be ignored if present.

The component opened for editing showing the Advanced tab settings.

The component opened for editing showing the Advanced tab settings.

Restrictions

  • The yellow color is intended to be used for emergency communications, to supplement the Issues Advisory Banner.

Was This Page Helpful?

 
(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Related Components

Last Reviewed:

June 3, 2020