University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Button Component

Bring more attention to a link by controlling the width, color, shape and wording of the button.

New Brand Features

Buttons can now be used in the header. Shapes, color and text alignment are ignored. 'Side by side' buttons are now truly side by side.
> read more about the digital brand transition
> read more about changes to this component

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

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.

This component can be placed in the main body of your page, in the right sidebar or 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

  1. Type the wording you want in the Button Text field (Learn More is the default text)
  2. In the Link field type the URL of the website you want to link to (example: http://www.thisisawebsite.com). If you are linking to a page within the UBCMS use the magnifying glass and navigate to the page you want to link to.
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, color, shape and text alignment.

The component opened for editing showing the Advanced tab settings.

The component opened for editing showing the Advanced tab settings.

New Brand Features

At a Glance
Can now be used in the header.
Shapes and text alignment are ignored.
'Side by side' buttons are truly adjacent.

Details

In the new brand, this component can be used in the Header.

Shapes and text alignment will be ignored, and 'side by side' buttons are truly side by side (see examples below).

Live example showing the old brand version.

Example of old brand version. Rounded buttons are stacked vertically despite being side-by-side.

Live example, showing the new brand version.

Example of new brand version. The buttons default to rectangles, but are correctly placed side by side.

Restrictions

None.

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:

April 21, 2017