Gradient Buttons

---

Description

Add a gradient color to any button block. This plugin uses css editor and works with all template families.

---

How To Install

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. 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);
}

---

Customize

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.

---