I am working on a challenge which I have a HubSpot CTA designed as below
<div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-164010508820"
style="max-width:100%; max-height:100%; width:816px;height:279.4140625px" data-hubspot-wrapper-cta-id="164010508820">
<a href="https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLLJaQcJoLKR26irII8p%2F19z%2FSnV8onkW5Jwxxgb3l4z3quUVLY3pl47dwtlVNL3sIm69GQ0AjuElyQTKhVtg961lsldmBs15tWZ8GSwvobvmcQrpGI2loaIZRNGuE3oMM7JN8Kkq3X%2BbuOje0BHyfUwqrQk1RoFgP37ezA%2Fx2FMwQj174eS%2B89pWZ7mreCSw3HOnH%2FR4YRJHu6EPF8DgD5JKoMbgo7WHc8SrMTBWIxlacTikVgNOAEV5ujOHCAnsyFlJteLJxk0hK8%2FFIkMzn4%3D&webInteractiveContentId=164010508820&portalId=7214937" target="_blank" rel="noopener" crossorigin="anonymous">
<img alt="" loading="lazy" src="https://no-cache.hubspot.com/cta/default/7214937/interactive-164010508820.png" style="height: 100%; width: 100%; object-fit: fill"
onerror="this.style.display='none'" />
</a>
</div>
This is a HubSpot embed CTA https://app.hubspot.com/calls-to-action/7214937/edit/164010508820/content. The Embed button “Plan een kennismaking in” has a problem. The problem is that while hovering on the button, there should be a transition to change the background color but not available in this embedded CTA.
transition: all .15s linear;
I tried so many things to define and target the proper selector to change or add a CSS code but no luck so far. Because it is an embed CTA, it will cover inside a JS code when trying to target it it is shown normally on the page with the below styles:
#hs_cos_wrapper_widget_1712657677670 .interactive-button {
background-color:rgba(255,85,60,1.0);
border:0px none #000000;
color:#FFFFFF;
font-size:12px;
font-family:'IBM Plex Sans',sans-serif;
font-style:normal;
font-weight:500;
text-decoration:none;
padding-top:12px;
padding-right:18px;
padding-bottom:12px;
padding-left:18px;
width:100%;
}
#hs_cos_wrapper_widget_1712657677670 .interactive-button:hover,
#hs_cos_wrapper_widget_1712657677670 .interactive-button:focus { background-color:rgba(0,45,60,1.0); }
#hs_cos_wrapper_widget_1712657677670 .interactive-button:active { background-color:rgba(80,125,140,1.0); }