# How to add button to custom HTML + HUBL module

**URL:** <https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439>\
**Category:** CMS Development\
**Created:** [April 28, 2020, 3:33pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439 "2020-04-28T15:33:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![walkabout](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/walkabout/32/29572_2.png) [@walkabout](https://community.hubspot.com/u/walkabout)\
**Post date:** [April 28, 2020, 3:33pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/1 "2020-04-28T15:33:49Z")

</div>

I am starting work on creating custom modules for a landing page that will reuse a certain layout quite a bit. The layout is fairly simple, a header, content, and button.

So far I’ve been able to create the module, add the header and text section but for some reason I dont see `button` as an option under Fields to add to the page. There is link and I guess I could style it as a button but wasnt sure if thats the right way.

---

<div class="post-metadata">

**Author:** ![BenSBM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bensbm/32/75413_2.png) [@BenSBM](https://community.hubspot.com/u/BenSBM)\
**Post date:** [April 28, 2020, 4:19pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/2 "2020-04-28T16:19:38Z")

</div>

Hi @walkabout

That’s exactly how I would go about that - use a the link option in the module fields and your own HTML/CSS to create and style the actual button.

---

<div class="post-metadata">

**Author:** ![walkabout](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/walkabout/32/29572_2.png) [@walkabout](https://community.hubspot.com/u/walkabout)\
**Post date:** [April 28, 2020, 5:37pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/3 "2020-04-28T17:37:31Z")

</div>

Thanks for the quick response, one other thing I noticed is when using the module I cannot change the link/button text. Shouldnt this be editable from the Drag and Drop custimization tool?

Heres a screenshot of options for link.

[![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/3/13ba50c35197325c074187360b3057996368835d.png) ](https://dl.dropboxusercontent.com/s/7j0eovw8e94b5eg/Screenshot%202020-04-28%2013.36.09.png?dl=0)

---

<div class="post-metadata">

**Author:** ![BenSBM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bensbm/32/75413_2.png) [@BenSBM](https://community.hubspot.com/u/BenSBM)\
**Post date:** [April 28, 2020, 5:44pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/4 "2020-04-28T17:44:12Z")

</div>

The link field is just for what content to link to - page, external URL, etc. To customize the actual button text, you would need an additional text field and insert that as your button text.

---

<div class="post-metadata">

**Author:** ![bholsey](https://avatars.discourse-cdn.com/v4/letter/b/71c47a/32.png) [@bholsey](https://community.hubspot.com/u/bholsey)\
**Post date:** [February 15, 2022, 8:51pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/5 "2022-02-15T20:51:17Z")

</div>

I am working on this issue right now and cannot figure out how to do this. This is what I have so far (but it isnt working):

\<button class=“read-more”\>

{% set href = item.button.button\_link.url.href %}

{% if item.button.button\_link.url.type is equalto “EMAIL\_ADDRESS” %}

{% set href = “mailto:” + href %}

{% endif %}

\<a href=“{{ href }}”

{% if item.button.button\_link.open\_in\_new\_tab %}target=“\_blank”{% endif %}

{% if item.button.button\_link.rel %}rel=“{{ item.button.button\_link.rel }}”{% endif %}

\>

{% inline\_text field=“button.button\_text” value=“{{ item.button.button\_text }}” %}

\</a\>

\</button\>

 ![Screen Shot 2022-02-15 at 3.50.56 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/1/d14d05c0c56b9051e6d4a146fc1cd19bb5f3f011.png)

Any help/assistance would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [February 16, 2022, 6:09pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/6 "2022-02-16T18:09:21Z")

</div>

@bholsey , any warnings or errors?

What is happening?

---

<div class="post-metadata">

**Author:** ![bholsey](https://avatars.discourse-cdn.com/v4/letter/b/71c47a/32.png) [@bholsey](https://community.hubspot.com/u/bholsey)\
**Post date:** [February 16, 2022, 6:56pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/7 "2022-02-16T18:56:48Z")

</div>

No errors. Nothing renders on the page.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [February 16, 2022, 7:15pm UTC](https://community.hubspot.com/t/how-to-add-button-to-custom-html-hubl-module/20439/8 "2022-02-16T19:15:28Z")

</div>

Just tested this in my portal (obviously lacking your styles other html) and it is working.

```lia-code-sample
{% for item in module.button %}
<button class="test">
	{% set href = item.link_field.url.href %}
	{% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
		{% set href = "mailto:" + href %}
	{% endif %}
	<a href="{{ href }}"
		{% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
		{% if item.link_field.rel %}rel="{{ item.link_field.rel }}"{% endif %}
		>
 {% inline_text field="text_field" value="{{ item.text_field }}" %}
	</a>
</button>

{% endfor %}

```

and here is a screengrab of the design manager with the fields on the right for reference 😀