Joomla! 4 is completely redesigned, rethought, and has new features. Joomla 4 Templates

Buttons are often used to navigate visitors to the sections of a website. "Call to action" buttons lead visitors to make an action (subscribe, open a link, buy...). You can use this block to create and style such buttons.

When a new button block is created, a placeholder button with default text will be inserted into the page. You can change it immediately by clicking the Block Settings icon or leave it like that and change it later.

Cog Button Block Settings

Button block settings

Button ID

Unique identifier of this block. It's useful for CSS or custom coding. If you don't need this, leave this field empty.

Button Class

Class name to this block in order to style it in your template's CSS file. If you don't need this, leave this field empty.

Text

Enter the text that will be on the button here.

Link

Enter the link for your button here. You can leave this empty, but in this case, your button will have only a decorative function.

Target

If you entered a link for your image, in this option you can select whether to open it in the same or new window.

Full Width

The width of the button is defined by the amount of text and padding value. However, if you enable the Full Width option, your button will use the full width of its parent container (column).

Width and Height

Width and height values are not mandatory and by default, the width of the button is defined by the amount of text and padding value. However, by using the Width and Height fields, you can explicitly set the button dimensions.

Button Align

By default, the button container is not aligned. Using this option, you can align it to the left or to the right or make it centered.

Font Size

Select predefined font size for the button (small, normal, medium, large or huge). For example, use large text for the important buttons and small text for buttons that are less important. The default value is normal.

Custom Font Size

ExpliExplicitlyitelly sets the font-size value to the block. You should enter a value and units. For example, valid values are 18px, 1.2em, 1.6rem, 150%, etc.

Text Color

Select a text color for the button using the color picker or by entering the HEX value manually.

Background Color

Select a background color for the button using the color picker or by entering the HEX value manually.

Border Width

If your button should have a border, enter the border-width value here. This value is usually in pixels, so valid values would be 1px, 3px, 5px, etc.

Border Color

If your button should have a border, enter the border color here. Select a color for the border using the color picker or by entering the HEX value manually.

Border Radius

If you need a button with rounded corners, enter a border-radius value here. This value is usually in pixels, so valid values would be 5px, 10px, etc.

Example

Button block output

Block Operations

To learn how to duplicate, move and delete blocks, visit the Blocks page of the Page Layout section.