{"id":926,"date":"2022-08-02T11:58:08","date_gmt":"2022-08-02T11:58:08","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/02\/6435964-hostinger-website-builder-how-to-add-buttons\/"},"modified":"2026-03-16T12:12:08","modified_gmt":"2026-03-16T12:12:08","slug":"6435964-hostinger-website-builder-how-to-add-buttons","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6435964-hostinger-website-builder-how-to-add-buttons\/","title":{"rendered":"Hostinger Website Builder: How to Add Buttons"},"content":{"rendered":"

In Hostinger Website Builder<\/b>, the easiest way to add buttons to your website is to use button elements<\/b>.<\/p>

Button elements<\/b><\/h2>

Within the editor, expand the Add elements<\/b> panel on the left. Select the button<\/b> element<\/b> and drag and drop it anywhere on your website:<\/p>

<\/div>

Click on the button to see more options (edit, duplicate, hide, delete, resize, etc.):<\/p>

\"The<\/div>

Click on Edit button <\/b>to open its settings:<\/p>

\n\n\n\n\n
\n

General<\/b><\/p>\n<\/td>\n

\n

Style<\/b><\/p>\n<\/td>\n

\n

Animation<\/b><\/p>\n<\/td>\n<\/tr>\n

\n

Button text<\/b>: rename the button<\/p>\n

Linking options<\/b>: hyperlink a button with:<\/p>\n

    \n
  • \n

    URL<\/p>\n<\/li>\n

  • \n

    Your website page<\/p>\n<\/li>\n

  • \n

    Phone number<\/p>\n<\/li>\n

  • \n

    Email address<\/p>\n<\/li>\n

  • \n

    File<\/p>\n<\/li>\n<\/ul>\n<\/td>\n

\n

Change the following style attributes of the button:<\/p>\n

    \n
  • \n

    Fill color<\/p>\n<\/li>\n

  • \n

    Text color\/font\/size<\/p>\n<\/li>\n

  • \n

    Border color\/width<\/p>\n<\/li>\n

  • \n

    Corner radius (button shape)<\/p>\n<\/li>\n<\/ul>\n<\/td>\n

\n

How to Add Animations<\/a><\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>

 <\/p>

Adding a button to the header<\/b><\/h2>

Within the editor, click on the header, and then Edit header<\/strong>:<\/p>

\"\"<\/p>

Then, click Elements<\/strong>, and toggle Show button<\/strong> on. You can customize how the button looks like by clicking Edit button<\/strong>:<\/p>

\"\"<\/p>

NOTES<\/b><\/p>