Buttons
Buttons
Within websites, it may be desirable to format hyperlinks prominently as buttons. There are various use cases and options for this.
Video of the training on formatting hyperlinks / buttons
In an online training course on formatting hyperlinks / buttons, the types and methods of formatting hyperlinks and displaying them as buttons were shown, as well as which button variant should be used for which occasions. You can watch the video here.
Note: The video can only be viewed by members of the university.
Format link list or menu as buttons
In this example, the link list has been inserted into a 2-column construct.
Important: This formatting applies the button look with a green-coloured left frame line to the links, which is visually similar to the sub-navigation in the left column. This button look communicates that these are internal links. Therefore, please do not use this formatting for links that refer to destinations outside the UOL!
Formatting links in text elements as buttons
Inline buttons
Once they have been defined, individual hyperlinks can be visually formatted as buttons in the flowing text. To do this, click with the mouse anywhere in the previously linked text when editing the text and then select the "Inline button" style in the editor's style menu. This button style is also suitable for discreet continuative links by positioning them at the end of a text as a new paragraph, which then looks like this:
More buttons
If a bold button is to be used as a link in the sense of "read more" or "read more", there is the "More button" from the style menu. It is aligned to the right and therefore points in the direction of reading. The more button always appears below the previous text and is therefore not an inline button. more
Action buttons
Action buttons stand out due to their colour and width - they automatically extend to the entire available width and can therefore also be understood as a clickable bar. They should invite you to click on them (= to perform an action), e.g. to call up a specific input form.
Assign the style "action button" to a linked text.
Normal button for Uni link destinations
The light grey button also appears in full width, but is less conspicuous. It is visually similar to the link formatting "Link list as buttons" (see above).
Important: By resembling the menu entries, this button visually indicates an internal university navigation option! External links should therefore not be formatted as buttons using this method!
To do this, click on a linked text with the mouse and then select the "Button (light grey)" entry from the style menu.
Pop-over message
This is a separate content element type that generates a red button and therefore has a signalling effect. After clicking, a so-called pop-over message opens, which closes again when clicked again. This button is not a hyperlink like the others, as it does not lead to another page, but opens an information text within the current page. Please only use it if a corresponding ATTENTION effect is intended.
Link list as tiles
To create a list of links (see example above Link list as buttons) as tiles - in other words, as large buttons - select"Link list as tiles" in the "Layout" field on the [Appearance] tab of the content element.
Instead of buttons: Paragraph styles for specific links
We know certain paragraph styles from the contact data, which can be assigned via the style menu in the TYPO3 editor. For certain links, it is advisable to use these paragraph styles instead of a button look. This is particularly useful if mixed links to external and internal pages as well as downloads are to be listed.