Box Shadow - Button Icon

[ZNapiecek]

Hello, 

Does anyone have idea how can make add a shadow to the image in my button once hovered? https://tpsisandler.com/webinar-diagnoza-potrzeb

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&amp;height=599&amp;name=Button%20Im..." 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&amp;height=300&amp;name=Button%20Im... 318w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=635&amp;height=599&amp;name=Button%20Im... 635w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=953&amp;height=899&amp;name=Button%20Im... 953w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=1270&amp;height=1198&amp;name=Button%20... 1270w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=1588&amp;height=1498&amp;name=Button%20... 1588w, https://tpsisandler.com/hs-fs/hubfs/Button%20Image.png?width=1905&amp;height=1797&amp;name=Button%20... 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 %}

[pm8rsh88 · Accepted solution]

Try adding a Filter CSS styling element to the image.

filter: drop-shadow(black 0.1em 0.1em 0.2em);