GoHighLevel Form Button CSS

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! 👍

You mean make this button

like this?

On 1/1/2024 at 3:29 AM, tuanphan said:

You mean make this button

like this?

@tuanphan Yes, exactly. 👍

How do we make that happen?

Try this code to Website Tools (under Not Linked) > Custom CSS

button.btn.btn-dark.button-element {
    box-shadow: -2px 2px 2px rgba(0,0,0,.4) !important;
    color: #fff !important;
}
button.btn.btn-dark.button-element  p {
     color: #fff !important;
    letter-spacing: -2px !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

button.btn.btn-dark.button-element:hover:after{
    animation: flash 1s forwards;
}
@keyframes flash {
100% {
    transform: rotatez(110deg) translate(10em,-200em);
}}

@tuanphan I was not able to get this to work...

On 1/3/2024 at 10:42 PM, MoltoBello said:

@tuanphan I was not able to get this to work...

Can you add & keep the code? I can check it again easier