Border Highlight Button

ezgif-3-5352e39e5c44-1.gif

Step One

Add a button to any page with the solid style.

Once a button has been added and saved, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the codes below into the Custom CSS Editor box.

// Highlight Border Button //

.sqs-block-button-element--small{
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.sqs-block-button-element--small:hover
{
  box-shadow: inset 0 0 0 5px #FECB2F;
}

Step Three

Replace the color #FECB2F value with the color of your choice.

The code works for the small button block. If you want to modify a medium or large button, replace all .sqs-block-button-element--small text with either .sqs-block-button-element--medium or .sqs-block-button-element--large.

Save and refresh the page. 👍

Moov Labs