Hello,
Does anyone have idea how can make add a shadow to the image in my button once hovered? Zrozumieć potrzeby klienta bez czytania w myślach - Webinar
Right now it looks like this:
The image placing:
<a class=“hs-button " href=”{{ href ~ query_param }}"
id=“hs-button_{{ name }}”
{% if module.link.open_in_new_tab %}target=“_blank”{% endif %}
rel=“{{ rel }}”>
{{ module.button_text }} <span class=“cta_icon”>
<img src=“https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=635&height=599&name=Button%20Image.png” width=“635” height=“599” loading=“lazy” alt=“Button Image” style=“height: auto; max-width: 100%; width: 18px;” srcset=“https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=318&height=300&name=Button%20Image.png 318w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=635&height=599&name=Button%20Image.png 635w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=953&height=899&name=Button%20Image.png 953w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=1270&height=1198&name=Button%20Image.png 1270w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=1588&height=1498&name=Button%20Image.png 1588w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=1905&height=1797&name=Button%20Image.png 1905w” sizes=“(max-width: 18px) 100vw, 18px”>
</span>
</a>
The rest:
{% if module.style.override_default_style %}
{% require_css %}
<style>
#cta_icon_ {{ name }} hover {
box-shadow: black 0.1em 0.1em 0.2em;
}
#hs-button_{{ name }} {
border-radius: 24px;
{% if module.style.horizontal_padding != null or module.style.vertical_padding != null %}
{#-
Failsafe: when padding is added the display will change to prevent overflowing buttons
if two buttons are placed on top one another.
-#}
display: inline-block;
{% endif %}
background-color: rgba({{ module.style.button_color.color|convert_rgb }},{{ module.style.button_color.opacity / 100 }});
color: {{ module.style.button_font.color }};
{% if module.style.button_font.size %}
font-size: {{ module.style.button_font.size }}{{ module.style.button_font.size_unit }};
{% endif %}
{{ module.style.button_font.style }};
{% if module.style.vertical_padding != null %}
padding-top: {{ module.style.vertical_padding ~ ‘px’ }};
padding-bottom: {{ module.style.vertical_padding ~ ‘px’ }};
{% endif %}
{% if module.style.horizontal_padding != null %}
padding-left: {{ module.style.horizontal_padding ~ ‘px’ }};
padding-right: {{ module.style.horizontal_padding ~ ‘px’ }};
{% endif %}
}
#hs-button_{{ name }}:hover {
background-color: rgba({{ module.style.button_hover_color.color|convert_rgb }},{{ module.style.button_hover_color.opacity / 20 }});
color: rgba({{ module.style.text_hover_color.color|convert_rgb }},{{ module.style.text_hover_color.opacity / 100 }}); text-shadow: black 0.1em 0.1em 0.2em;
{% if module.style.vertical_padding != null %}
padding-top: {{ module.style.vertical_padding ~ ‘px’ }};
padding-bottom: {{ module.style.vertical_padding ~ ‘px’ }};
{% endif %}
{% if module.style.horizontal_padding != null %}
padding-left: {{ module.style.horizontal_padding ~ ‘px’ }};
padding-right: {{ module.style.horizontal_padding ~ ‘px’ }};
{% endif %}
}
</style>
{% end_require_css %}
{% endif %}