Fade Out Line Button for Forms and Nav Button

Hi there, 

Found this awesome code, which works brilliantly for buttons. I've been trying to see how this can also be achieved for the header nav button and form button, but can't seem to target the right class. Would be great to have all buttons looking the same. Thank you!

// Fade Out Line Buttom - Left To Right //

.sqs-block-button-element--small {

  position:relative;

  height: 60px;

  line-height: 60px;

  text-align: center;

  transition: 0.5s;

  padding: 0 20px;

  cursor: pointer;

  -webkit-transition:0.5s;

}

.sqs-block-button-element--small:hover {

  background-color: transparent !important;

  border-color: transparent !important;

  color: #000000 !important;

}

.sqs-block-button-element--small:hover:before{

    transition-delay: .2s;

}

.sqs-block-button-element--small::before{

  width: 0%;

  height:100%;

  z-index: 3;

  content:'';

  position: absolute;

  bottom:-1px;

  left:0;

  box-sizing: border-box;

  transition: .2s;

}

.sqs-block-button-element--small:hover::before {

  width: 100% !important;

  transition: .7s;

}

.sqs-block-button-element--small::before {

  border-bottom: 1px solid #000000;

}

On 3/30/2021 at 10:52 AM, Daffz said:

Hi there, 

Found this awesome code, which works brilliantly for buttons. I've been trying to see how this can also be achieved for the header nav button and form button, but can't seem to target the right class. Would be great to have all buttons looking the same. Thank you!

// Fade Out Line Buttom - Left To Right //

.sqs-block-button-element--small {

  position:relative;

  height: 60px;

  line-height: 60px;

  text-align: center;

  transition: 0.5s;

  padding: 0 20px;

  cursor: pointer;

  -webkit-transition:0.5s;

}

 

.sqs-block-button-element--small:hover {

  background-color: transparent !important;

  border-color: transparent !important;

  color: #000000 !important;

}

.sqs-block-button-element--small:hover:before{

    transition-delay: .2s;

}

 

.sqs-block-button-element--small::before{

  width: 0%;

  height:100%;

  z-index: 3;

  content:'';

  position: absolute;

  bottom:-1px;

  left:0;

  box-sizing: border-box;

  transition: .2s;

 

}

 

.sqs-block-button-element--small:hover::before {

  width: 100% !important;

  transition: .7s;

}

 

.sqs-block-button-element--small::before {

  border-bottom: 1px solid #000000;

}

What is your site url