Text Link Zoom In Hover.

https://www.thesoaresprotocol.com/

Hey everyone!

I am trying to create a hover effect that would zoom in on my homepage menu links when hovering, but only for my homepage links. To improve the effectiveness of the CTAs and the navigation.

Something like that but applying to size.

https://codepen.io/zastrow/pen/yLgVRNZ

I am referring to those text links:

Thank you!

I am also trying to apply this CSS code to my contact form button (here) and my newsletter signup button (in the footer) but I can't seem to find the right classes to target (I changed the header actions class of course).

/* Lifted Button with Shadow */
.header-actions-action--cta{
  transition:all .5s!important;
}
.header-actions-action--cta:hover *{
  box-shadow: 0 10px 15px rgba(0,0,0,0.5);
  margin-top:-2px;
  opacity:1!important;
  transition:all .5s!important;
}

I tried:

button-block
sqs-block-button
sqs-block-button-element
sqs-block-button-element--small/medium/large
sqs-button-element--primary
..and so on.

Thank you again!

Hey everyone! Any ideas? Thank you.

With contact form lightbox button, use this

button.lightbox-handle:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    margin-top:-2px;
    opacity:1 !important;
    transition:all .5s !important;
}
button.lightbox-handle {
    transition: all 0.5s !important;
}

6 hours ago, tuanphan said:

With contact form lightbox button, use this

button.lightbox-handle:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    margin-top:-2px;
    opacity:1 !important;
    transition:all .5s !important;
}
button.lightbox-handle {
    transition: all 0.5s !important;
}

 

Thank you Tuan! Works great! Any ideas for the Newsletter button and text hover effect?