# Box Shadow - Button Icon

**URL:** <https://community.hubspot.com/t/box-shadow-button-icon/115756>\
**Category:** CMS Development\
**Tags:** free\
**Created:** [September 4, 2024, 10:59am UTC](https://community.hubspot.com/t/box-shadow-button-icon/115756 "2024-09-04T10:59:44Z")\
**Posts on this page:** 2\
**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 4, 2024, 10:59am UTC](https://community.hubspot.com/t/box-shadow-button-icon/115756/1 "2024-09-04T10:59:44Z")

</div>

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](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&height=599&name=Button%20Image.png](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](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](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](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](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](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](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 %}

---

<div class="post-metadata">

**Author:** ![pm8rsh88](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pm8rsh88/32/78471_2.png) [@pm8rsh88](https://community.hubspot.com/u/pm8rsh88)\
**Post date:** [September 4, 2024, 3:51pm UTC](https://community.hubspot.com/t/box-shadow-button-icon/115756/2 "2024-09-04T15:51:29Z")

</div>

Try adding a Filter CSS styling element to the image.

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