Lightbox - Underline Hover Effect

Site URL: https://taranaomi.com/contact

Hi there!

wanting to get rid of the original hover effect on my lightbox form and replace it with a gradual underline. This is the code I have so far - the underline works but I don't know how to get rid of the black background. I need it to be transparent so I can put a background colour/images. I also need the underline to be brought closer to the "Coffee?" - tried reducing padding but it's not working.

Any help would be appreciated!

//Lightbox Adjustments //

.lightbox-handle {
  border: none !important;
  font-family: 'lost-lovers-regular' !important
  
}

button.lightbox-handle:before {
 width: 0%;
 height: 100%; 
 z-index: 3;
 content: '';
 position: absolute;
 left: 0;
 transition: .2s; 
}

button.lightbox-handle:before {     border-bottom: 1px solid #000000!important; 

} 

button.lightbox-handle:hover:before {     transition-delay: .3s; 
}   

button.lightbox-handle:hover:before {   width: 100% !important; 
transition: .7s; 

}  

button.lightbox-handle:hover {     position: relative;     
transition: 0.5s;     
padding: 0 10px; 
cursor: pointer;     
-webkit-transition: 0.5s; 
font-style: italic !important;
}  

Hi,

Can you add the form again? I see the text only