No results found. Please refine your search criteria or contact us.
MoreMenu

Buttons

All button styles of your website can be managed in the Buttons backend module. Every button that is created in this module will be available for selection in places such as submit form field or triggers for modals and panels.

Note

The button content depends on the use case and is set in other Contao elements (e.g. in the submit form field settings).

Each button style consists of a basic configuration:

Internal name
The internal button name is used in backend only to easily identify the button styles in other Contao elements.
Type
The button type determines the button general look and features.
Button style
The button style allows you to customize the button look with style presets.
Choose a predefined button style in the submit form field settings

Default button style

The default (global) button style can be set in your design settings. It will affect all buttons on the page, unless they have an explicitly selected style in their settings (e.g. in the submit form field settings).

The default button style can be set in the design settings

Button content

As mentioned previously, the button content is a very individual thing and it cannot be set in the global context. There are multiple places in Contao where buttons are added: forms, panel/modal triggers, button links, etc. Due to the fact that every button is different, its content and essential settings can be defined directly in the element this button belongs to.

The button content and extra settings can be defined individually

Advanced usage in template files

It is also possible to generate a button in your custom frontend templates. The buttons are split into two types: form buttons (<button>) and link buttons (<a>). Although they share most of the attributes, they differ significantly in the usage purpose.

To add a form button <button> you can use the code below. The template responsible for generating the HTML markup is inside the vee_button_standard_form.html5 file.

<?= $this->getButton('form', 'Send us a message', [
    'buttonType' => 'submit', // required, can also be "button"
    'buttonId' => 'my-button-id', // the ID attribute (optional)
    'style' => 123, // ID of the button style, if none provided the default button style will be used (optional)

    // Common attributes
    'cssClasses' => ['my-class-1', 'my-class-2'],
    'align' => 'center',
    'icon' => 'icon-envelope',
    'iconPosition' => 'right',
]) ?>

To add a link button <a> you can use the code below. The template responsible for generating the HTML markup is inside the vee_button_standard_link.html5 file.

<?= $this->getButton('link', 'View our services', [
    'url' => '{{link_url::456}}', // required
    'linkId' => 'my-link-id', // ID attribute (optional)
    'linkClass' => 'my-link-class', // link class (optional)
    'linkTitle' => 'My link title', // link title (optional)
    'newWindow' => true,  // link title (optional)
    'linkData' => 'data-my-link="foobar"', // custom attributes (optional)
    
    // Common attributes
    'cssClasses' => ['my-class-1', 'my-class-2'],
    'align' => 'center',
    'icon' => 'icon-envelope',
    'iconPosition' => 'right',
]) ?>