Using custom CSS on buttons

Tips and Tricks Showcase
1

Hey folks, we recently released the ability to use CSS to change how your buttons look within Stacker. I thought I’d do a quick guide on some basics.

To put custom CSS in, head to App Settings → Appearance → Custom CSS. You’ll then need to refer to the June 22nd release notes to decide which button you want to change the appearance of.

Let’s try changing the save button - we’ll change the background color, the text color, and give it a groovy little box shadow. Copy and paste the below into Custom CSS:

.stk-save-button {
  background-color: orange;
  color: darkblue;
  box-shadow: 2px 2px;
}

image

Or how about something a bit more complicated - this chunky little cancel / save combo:

.stk-save-button {
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
}
.stk-cancel-button {
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
}

image

The possibilities are endless! Try playing around with the code above, or check out a selection of styles you can incorporate into your app here:

1 Like