{"id":126,"date":"2025-07-22T07:08:56","date_gmt":"2025-07-22T07:08:56","guid":{"rendered":"https:\/\/php80.local.nextendweb.com\/roland\/mosaicbuilder\/?post_type=documentation&#038;p=126"},"modified":"2026-03-16T12:21:39","modified_gmt":"2026-03-16T12:21:39","slug":"button","status":"publish","type":"documentation","link":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/","title":{"rendered":"Button"},"content":{"rendered":"\n<p>Buttons are essential elements of web design, enabling interactivity and navigation throughout your website. Every button element includes an <span class=\"mb_badge\">Inherited text<\/span> that automatically inherits the typography styles you&#8217;ve set for the element. This means you don&#8217;t need to adjust the text separately, it&#8217;s already styled based on your button&#8217;s settings.<\/p>\n\n\n\n<p>You can also easily<strong> convert buttons into links and vice versa<\/strong>, offering greater flexibility. Although buttons and links can have different functions, they both ultimately guide users to take specific actions or reach particular destinations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"element-classes\">Element classes<\/h2>\n\n\n\n<p>You can <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/class-system\/#select-element-class\">select<\/a> the following element classes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#button\">Button<\/a><\/li>\n\n\n\n<li><a href=\"#link\">Link<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"button\">Button<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"196\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png\" alt=\"Button element displayed on the Mosaic canvas, used to create interactive call-to-action elements within the layout\" class=\"wp-image-462\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01-300x90.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01-400x120.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>You&#8217;re not limited to just text, you can easily add other elements, like an icon alongside the text. And, if you want to customize the button further, the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/style-tab\/\">Style tab<\/a> gives you complete control to personalize it exactly how you like.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"link\">Link<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"166\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-02.png\" alt=\"Link element shown on the Mosaic canvas, used to create navigational hyperlinks within the webpage layout\" class=\"wp-image-463\" style=\"width:656px;height:auto\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-02.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-02-300x76.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-02-400x101.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>The Link element lets you make almost any element clickable by <strong>wrapping it inside a link<\/strong>. Right-click on an element in the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/#navigator\">Navigator<\/a> or on the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/#canvas\">Canvas<\/a>, then choose <span class=\"mb_badge\">Wrap in link<\/span>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03-1.png\" alt=\"Mosaic editor showing the right-click menu on the Canvas with the \u201cWrap in link\u201d option highlighted\" class=\"wp-image-1902\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03-1.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03-1-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>You can nest images, text, or even entire blocks inside, turning them into links that direct users to another page, section, or external URL. This makes it easy to create anything from simple text links to fully clickable content blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03.png\" alt=\"Blog card wrapped in a Link element in Mosaic, demonstrating how entire content blocks can be made clickable\" class=\"wp-image-464\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-03-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>Additionally, you can fully customize how it looks by adjusting its settings in the <span class=\"mb_badge\">Style tab<\/span>.<\/p>\n\n\n\n<p>Any text inside a link will, by default, have an underline. If you&#8217;d prefer not to have it, you can easily remove it by adjusting the decoration setting in the Style tab of the link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-04.png\" alt=\"Text decoration dropdown highlighted in Mosaic's Style tab for the Link element, allowing removal of default underline styling\" class=\"wp-image-465\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-04.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-04-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-04-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"settings-tab\">Settings tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-05.png\" alt=\"Advanced tab settings for the Link element in Mosaic, showing URL and Target options for customizing link destination and behavior\" class=\"wp-image-467\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-05.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-05-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-05-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>In the Right sidebar\u2019s Settings tab settings, you&#8217;ll find options, like <span class=\"mb_badge\">URL<\/span> and <span class=\"mb_badge\">Target<\/span>, which allow you to manage and customize the behavior of your links. These settings are particularly useful for defining where the link directs users and where it opens.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"trigger-javascript\">Trigger JavaScript<\/h4>\n\n\n\n<p>If you want a button to run custom JavaScript, you can do this through the Settings tab under <strong>Attributes<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name: onclick<\/li>\n\n\n\n<li>Value: <span class=\"mb_badge\">alert(&#8216;test&#8217;);<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-9.png\" alt=\"Mosaic editor\u2019s Advanced tab showing an added attribute with Name set to \u201conclick\u201d and Value set to \u201calert('test');\u201d\" class=\"wp-image-1905\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-9.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-9-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>This creates an <a href=\"https:\/\/www.w3schools.com\/jsref\/event_onclick.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">onclick event<\/a>, so when the button is clicked, the specified JavaScript code will run.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-states\">Additional states<\/h2>\n\n\n\n<p>The Button includes additional states, accessible through the state selector. For more information on how states work, refer to the <a href=\"https:\/\/mosaicbuilder.com\/docs\/editor\/class-system\/\">Class system documentation<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"hover-when-link\">Hover when link<\/h4>\n\n\n\n<p>The <span class=\"mb_badge\">Hover when link<\/span> additional state, specific to button and link element classes, is available in the Style tab\u2019s state selector.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-06.png\" alt=\"'Hover when link' state selected in Mosaic\u2019s Style tab state selector\" class=\"wp-image-468\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-06.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-06-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-06-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n\n<p>When you add a link to your button or link, you&#8217;ll be able to set a hover color for both links and buttons. By default, there\u2019s no hover styling applied.<\/p>\n\n\n\n<p>To customize it, simply choose the <strong>Hover when link<\/strong> state from the dropdown menu and then adjust the styles through the Style tab. These changes will be saved specifically for the chosen state. If you want to remove the hover styling altogether, just click the <strong>back arrow<\/strong> next to the state name in the dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"384\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-07.png\" alt=\"Back arrow highlighted in Mosaic\u2019s Style tab state selector, used to exit the 'Hover when link' state and return to default styling\" class=\"wp-image-469\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-07.png 656w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-07-300x176.png 300w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-07-400x234.png 400w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n\n\n<div class=\"mb_notice\"><div class=\"mb_notice__title\">Notice<\/div><div class=\"mb_notice__content\">\n<p>Hover effects may not work well on smaller screens (like mobile devices), so it&#8217;s important to consider that while designing for different breakpoints.<\/p>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-anchor-links\">How to create anchor links?<\/h3>\n\n\n\n<p>HTML provides anchor links that let you navigate to different sections of the same page. In Mosaic you can set them up this way:<\/p>\n\n\n\n<p><strong>Step 1: <\/strong>Select the element where you want to scroll to. On its <span class=\"mb_badge\">Settings<\/span> tab, add an <span class=\"mb_badge\">ID<\/span> attribute to it with a unique name. (The name shouldn\u2019t contain spaces or special characters.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2359\" height=\"1067\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id.png\" alt=\"\" class=\"wp-image-2986\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id.png 2359w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id-800x362.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id-1216x550.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id-768x347.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id-1536x695.png 1536w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id-2048x926.png 2048w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/settings_id-400x181.png 400w\" sizes=\"auto, (max-width: 2359px) 100vw, 2359px\" \/><\/figure>\n\n\n\n<p><br><strong>Step 2:<\/strong> Go to your Button\/Link, and write #name in its URL field, with the name you used in Step 1.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2355\" height=\"1121\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url.png\" alt=\"\" class=\"wp-image-2987\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url.png 2355w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url-800x381.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url-1216x579.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url-768x366.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url-1536x731.png 1536w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url-2048x975.png 2048w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/anchor_url-400x190.png 400w\" sizes=\"auto, (max-width: 2355px) 100vw, 2355px\" \/><\/figure>\n\n\n\n<p><strong>Step 3:<\/strong> If you would like to have smooth scrolling effect, insert a <a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/code\/\">Code element<\/a> into your page with the following code:<\/p>\n\n\n<div class=\"mb-code\">\n\t<div class=\"mb-code-header\">\n\t\t<div class=\"mb-code-icon\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"none\">\n\t\t\t\t<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14.371 6.072a1 1 0 0 1 .557 1.3l-4 10a1 1 0 1 1-1.856-.743l4-10a1 1 0 0 1 1.3-.557Zm-7.746.147a1 1 0 0 1 .156 1.406L3.28 12l3.5 4.375a1 1 0 0 1-1.562 1.25l-4-5a1 1 0 0 1 0-1.25l4-5a1 1 0 0 1 1.406-.156Zm10.75 0a1 1 0 0 1 1.406.156l4 5a1 1 0 0 1 0 1.25l-4 5a1 1 0 1 1-1.562-1.25L20.72 12l-3.5-4.375a1 1 0 0 1 .156-1.406Z\" clip-rule=\"evenodd\"\/>\n\t\t\t<\/svg>\n\t\t<\/div>\n\t\t<div class=\"mb-code-title\">Code<\/div>\n\t<\/div>\n\t<div class=\"mb-code-body\">\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\nhtml {\n  scroll-behavior: smooth;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>You can add it to your <a href=\"https:\/\/mosaicbuilder.com\/docs\/getting-started\/masters\/#using-the-navigator\">Master<\/a>, to make it load into all pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1063\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-scaled.png\" alt=\"\" class=\"wp-image-2989\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-scaled.png 2560w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-800x332.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-1216x505.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-768x319.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-1536x638.png 1536w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-2048x850.png 2048w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/smooth_scroll-400x166.png 400w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-add-a-link-within-the-text\">How to add a link within the text?<\/h3>\n\n\n\n<p>If you want to add a link to only a part of your text, here&#8217;s how:<br><strong>Step 1:<\/strong> Write your content using the <a href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/text\/\">Text element<\/a>.<br><strong>Step 2:<\/strong> Highlight the specific part of the text that you want to turn into a link.<br><strong>Step 3:<\/strong> Once highlighted, the link option will appear in the toolbar.<br><strong>Step 4:<\/strong> Click on the link option and add the link to the selected text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2087\" height=\"915\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link.png\" alt=\"\" class=\"wp-image-2993\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link.png 2087w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link-800x351.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link-1216x533.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link-768x337.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link-1536x673.png 1536w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link-2048x898.png 2048w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/inline_link-400x175.png 400w\" sizes=\"auto, (max-width: 2087px) 100vw, 2087px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-a-file-download-link\">How to create a file download link?<\/h3>\n\n\n\n<p><strong>Step 1:<\/strong> Select the Button (or Link) element you would like to use.<br><strong>Step 2:<\/strong> Go to its <span class=\"mb_badge\">Settings<\/span> tab settings.<br><strong>Step 3:<\/strong> Write the file\u2019s link into the <span class=\"mb_badge\">URL<\/span> field.<br><strong>Step 4:<\/strong> Add a <span class=\"mb_badge\">download<\/span> attribute (with <span class=\"mb_badge\">true<\/span> or empty value) to it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1507\" height=\"1091\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url.png\" alt=\"\" class=\"wp-image-2995\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url.png 1507w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url-800x579.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url-1216x880.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url-768x556.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url-945x684.png 945w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/download_url-378x274.png 378w\" sizes=\"auto, (max-width: 1507px) 100vw, 1507px\" \/><\/figure>\n\n\n<div class=\"mb_notice\"><div class=\"mb_notice__title\">Notice<\/div><div class=\"mb_notice__content\">\n<p>For security reasons, browsers only allow download links for files hosted on your own domain!<\/p>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-relative-urls\">How to create relative URLs?<\/h3>\n\n\n\n<p>When you create links pointing to your own website, we suggest selecting the page\/post <strong>from the search results<\/strong>. These would be relative to your domain, so if you decide to move your website to a different domain later on, your links would still stay fine.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1291\" height=\"1032\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search.png\" alt=\"\" class=\"wp-image-3097\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search.png 1291w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search-800x640.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search-1216x972.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search-768x614.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search-856x684.png 856w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/link_search-343x274.png 343w\" sizes=\"auto, (max-width: 1291px) 100vw, 1291px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-a-phone-number-calling-link\">How to create a phone number calling link?<\/h3>\n\n\n\n<p>If you would like a Button\/Link with a phone number in it, just simply write \u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/a#linking_to_telephone_numbers\" target=\"_blank\" rel=\"noreferrer noopener\">tel:<\/a>\u201d and the phone number into the URL field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1403\" height=\"1043\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel.png\" alt=\"\" class=\"wp-image-3098\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel.png 1403w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel-800x595.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel-1216x904.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel-768x571.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel-920x684.png 920w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/tel-369x274.png 369w\" sizes=\"auto, (max-width: 1403px) 100vw, 1403px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-create-an-email-address-link\">How to create an email address link?<\/h3>\n\n\n\n<p>If you would like to have an email address within a Button\/Link, you should just write \u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/a#linking_to_an_email_address\" target=\"_blank\" rel=\"noreferrer noopener\">mailto:<\/a>\u201d and the email address into the URL field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1265\" height=\"1041\" src=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto.png\" alt=\"\" class=\"wp-image-3099\" srcset=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto.png 1265w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto-800x658.png 800w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto-1216x1001.png 1216w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto-768x632.png 768w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto-831x684.png 831w, https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/mailto-333x274.png 333w\" sizes=\"auto, (max-width: 1265px) 100vw, 1265px\" \/><\/figure>\n","protected":false},"parent":120,"menu_order":22,"template":"","meta":{"_acf_changed":false},"class_list":["post-126","documentation","type-documentation","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>- Docs - Mosaic<\/title>\n<meta name=\"description\" content=\"This document covers how to use Button and Link elements for interactivity and navigation. It explains styling options and advanced settings like URL targets and hover states.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button\" \/>\n<meta property=\"og:description\" content=\"This document covers how to use Button and Link elements for interactivity and navigation. It explains styling options and advanced settings like URL targets and hover states.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/\" \/>\n<meta property=\"og:site_name\" content=\"Mosaic\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mosaicbuilderwp\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-16T12:21:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"656\" \/>\n\t<meta property=\"og:image:height\" content=\"196\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@MosaicBuilderWP\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/\",\"url\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/\",\"name\":\"- Docs - Mosaic\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.mosaicbuilder.com\\\/_\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Button-01.png\",\"datePublished\":\"2025-07-22T07:08:56+00:00\",\"dateModified\":\"2026-03-16T12:21:39+00:00\",\"description\":\"This document covers how to use Button and Link elements for interactivity and navigation. It explains styling options and advanced settings like URL targets and hover states.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.mosaicbuilder.com\\\/_\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Button-01.png\",\"contentUrl\":\"https:\\\/\\\/cdn.mosaicbuilder.com\\\/_\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Button-01.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/button\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mosaicbuilder.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elements\",\"item\":\"https:\\\/\\\/mosaicbuilder.com\\\/docs\\\/elements\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mosaicbuilder.com\\\/#website\",\"url\":\"https:\\\/\\\/mosaicbuilder.com\\\/\",\"name\":\"Mosaic\",\"description\":\"Mosaic goes beyond page building. It\u2019s a complete theme builder and design system that helps your next website stand out in style, speed, and functionality.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mosaicbuilder.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"- Docs - Mosaic","description":"This document covers how to use Button and Link elements for interactivity and navigation. It explains styling options and advanced settings like URL targets and hover states.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/","og_locale":"en_US","og_type":"article","og_title":"Button","og_description":"This document covers how to use Button and Link elements for interactivity and navigation. It explains styling options and advanced settings like URL targets and hover states.","og_url":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/","og_site_name":"Mosaic","article_publisher":"https:\/\/www.facebook.com\/mosaicbuilderwp","article_modified_time":"2026-03-16T12:21:39+00:00","og_image":[{"width":656,"height":196,"url":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@MosaicBuilderWP","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/","url":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/","name":"- Docs - Mosaic","isPartOf":{"@id":"https:\/\/mosaicbuilder.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/#primaryimage"},"image":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png","datePublished":"2025-07-22T07:08:56+00:00","dateModified":"2026-03-16T12:21:39+00:00","description":"This document covers how to use Button and Link elements for interactivity and navigation. It explains styling options and advanced settings like URL targets and hover states.","breadcrumb":{"@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mosaicbuilder.com\/docs\/elements\/button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/#primaryimage","url":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png","contentUrl":"https:\/\/cdn.mosaicbuilder.com\/_\/wp-content\/uploads\/2025\/07\/Button-01.png"},{"@type":"BreadcrumbList","@id":"https:\/\/mosaicbuilder.com\/docs\/elements\/button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mosaicbuilder.com\/"},{"@type":"ListItem","position":2,"name":"Elements","item":"https:\/\/mosaicbuilder.com\/docs\/elements\/"},{"@type":"ListItem","position":3,"name":"Button"}]},{"@type":"WebSite","@id":"https:\/\/mosaicbuilder.com\/#website","url":"https:\/\/mosaicbuilder.com\/","name":"Mosaic","description":"Mosaic goes beyond page building. It\u2019s a complete theme builder and design system that helps your next website stand out in style, speed, and functionality.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mosaicbuilder.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/types\/documentation"}],"up":[{"embeddable":true,"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/documentation\/120"}],"wp:attachment":[{"href":"https:\/\/mosaicbuilder.com\/wp-json\/wp\/v2\/media?parent=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}