Custom Button Module - Add Logo to the button

[ZNapiecek]

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

[ZNapiecek]

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?

https://tpsisandler.com/artykuly/5-przyczyn-b%C5%82%C4%99dnej-diagnozy-potrzeb-klienta

[GRajput]

Hi @ZNapiecek 

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

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!

[ZNapiecek]

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

[GRajput · Accepted solution]

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:

{% 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:

.hs-button {
  // Your Styles
}

You can see this screenshot. 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!