Gradient Buttons

gradient.png

Step One

Add a button to any page with a solid or raised style.

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

Step Two

There are two styles available. Copy and paste one of the codes below into the Custom CSS Editor box.

// Gradient Button From Top To Bottom //

.sqs-block-button .sqs-block-button-element--medium {
  background: grey;
  background: -webkit-linear-gradient(to top, #0000000, #ffffff);
  background: linear-gradient(to top, #000000, #ffffff);
}

// Gradient Button From Left To Right //

.sqs-block-button .sqs-block-button-element--medium {
  background: grey;
  background: -webkit-linear-gradient(to left, #0000000, #ffffff);
  background: linear-gradient(to left, #000000, #ffffff);
}

Step Three

Replace both #000000 and #ffffff with the color codes of your choice. Visit UI Gradients or Colorzilla for help with generating gradient color codes and patterns. Both of these sites make it super easy!

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

Save and refresh the page. 👍

Moov Labs