# Custom Button Module - Add Logo to the button

**URL:** <https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685>\
**Category:** CMS Development\
**Tags:** free\
**Created:** [September 3, 2024, 10:48am UTC](https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685 "2024-09-03T10:48:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ZNapiecek](https://avatars.discourse-cdn.com/v4/letter/z/5f8ce5/32.png) [@ZNapiecek](https://community.hubspot.com/u/ZNapiecek)\
**Post date:** [September 3, 2024, 10:48am UTC](https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685/1 "2024-09-03T10:48:49Z")

</div>

Hello,

I’m new to coding. I made custom to HubSpot button module, i cloned in the design manager and made some adjustments like adding text shadow once it’s hovered.  
I would like to add logo to the button text, it should slide in from left when hovered. But I struggle with adding an image in the end of the text line. Do you have any suggestions how can I do it?

Tehank you for your support,

Zuza

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [September 3, 2024, 12:43pm UTC](https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685/2 "2024-09-03T12:43:29Z")

</div>

Hi @ZNapiecek

Welcome to coding. I believe you want something like this :

> **[Home Page](https://20797637.hs-sites.com/strive/home)**

( Check the CTA of the hero section ). I have used Icon over here but you can also use an image. I’m assuming that you are using \<a\> tag to create your button. By default, the anchor tag is an inline element so you need to change that to block or inline-block.

On my page, I have used padding which increases when you hover over it but you can also achieve the same result by using the transform property. For the rest, you can just inspect my CTA and copy the properties and it will work.

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![ZNapiecek](https://avatars.discourse-cdn.com/v4/letter/z/5f8ce5/32.png) [@ZNapiecek](https://community.hubspot.com/u/ZNapiecek)\
**Post date:** [September 3, 2024, 12:58pm UTC](https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685/3 "2024-09-03T12:58:20Z")

</div>

Thank you for answer! So I should make changes somewhere here?

 ![Zrzut ekranu 2024-09-3 o 14.55.12.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/b/bc2cfb46f98c7b7fdf6a40138b3295d9aeba0084.jpeg)

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [September 3, 2024, 1:24pm UTC](https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685/4 "2024-09-03T13:24:10Z")

</div>

Hi @ZNapiecek

Yes. If you are making changes in your module.html you need to add a require\_css hubl tag and a style tag. In that style tag, you need to select your cta by its selector. Like this:

```lia-code-sample
{% require_css %}
<style>
#hs-button_{{ name }} {
 // Your styles 
}
</style>
{% end_require_css %}

```

OR

You can do that in module.css but without any tag. Like this:

```lia-code-sample
.hs-button {
 // Your Styles
}

```

You can see this [screenshot](https://prnt.sc/PetGGwj8OYP_). I have marked areas where you can put your styles.

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![ZNapiecek](https://avatars.discourse-cdn.com/v4/letter/z/5f8ce5/32.png) [@ZNapiecek](https://community.hubspot.com/u/ZNapiecek)\
**Post date:** [September 3, 2024, 2:08pm UTC](https://community.hubspot.com/t/custom-button-module-add-logo-to-the-button/115685/5 "2024-09-03T14:08:35Z")

</div>

I made it! I added the image! Thank you!

The are only 2 more problems:

1. I need to align it with text

2. It should be seen only when hovered

Do you have any ideas?

> **[5 przyczyn błędnej diagnozy potrzeb klienta](https://tpsisandler.com/blog/techniki-sprzeda%C5%BCy/5-przyczyn-b%C5%82%C4%99dnej-diagnozy-potrzeb-klienta)**
>
> Badanie potrzeb klienta w sprzedaży: 5 przyczyn błędnej diagnozy. Jak uniknąć pułapek i skutecznie zadawać pytania, by lepiej zrozumieć potrzeby klienta. Jako ekspert w sprzedaży, odkryj klucz do sukcesu.