Trying to get the form buttons in the embedded HighLevel forms to perform the same as the native buttons on the rest of the website.
Example of the buttons on the site are the Strategy Call buttons on the homepage: https://www.avantimarketingsolutions.com/
Example of the HighLevel form button not display correctly: https://www.avantimarketingsolutions.com/dental-practice-marketing-agency
I am not sure I have the right callout for the HighLevel buttons:
.hl-app button.btn-dark.button-element
Here is the complete button code:
/* button styling */
.header-actions .sqs-button-element--primary, .sqs-block.sqs-block-button .sqs-block-button-element, .list-section-button-container .sqs-block-button-element, .hl-app button.btn-dark.button-element, div.form-block input[type="submit"] {
background: rgba(0,187,255,1) !important;
color: #fff !important;
letter-spacing: -2px !important;
font-size: 30px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
box-shadow:-2px 2px 2px rgba(0, 0, 0, .4);
border-radius: 5px;
display: block;
padding: 20px 30px !important;
display: inline-block;
border: 2px solid transparent;
position:relative;
overflow:hidden;
}
.header-actions .sqs-button-element--primary:hover, .sqs-block.sqs-block-button .sqs-block-button-element:hover, .list-section-button-container .sqs-block-button-element:hover, div.form-block input[type="submit"]:hover {
transform: scale(1.01);
transition: all .2s ease !important;
opacity: 1 !important;
}
/* sheen effect */
/* This is the base aniamtion*/
.header-actions .sqs-button-element--primary:after, .sqs-block.sqs-block-button .sqs-block-button-element:after, .list-section-button-container .sqs-block-button-element:after, div.form-block input[type="submit"]:after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(110deg)
translate(-5em, 15em)
}
/*This activates the sheen once the button has been hovered*/
.header-actions .sqs-button-element--primary:hover::after, .sqs-block.sqs-block-button .sqs-block-button-element:hover::after, .list-section-button-container .sqs-block-button-element:hover::after, div.form-block input[type="submit"]:hover::after {
animation: sheen 1s forwards;
}
@keyframes sheen {
100% {
transform: rotateZ(110deg) translate(10em, -200em);
}
}
Thanks in advance for your help! 👍