Change Color of HTML5 Buttons

Many people have asked how to change the color on the new HTML5 buttons used in FormLoom2. It really is pretty easy and only requires using some custom CSS to make it happen. The buttons are styled with CSS gradients. There is a start-color(top) and an end-color(bottom). These colors are set using the hexadecimal style for simplicity's sake, but you can use rgb or rgba if you like. Below is a link you can use to a good online hexadecimal color-picker.

The following code is what you can base your custom CSS off sure to reference your page # as shown in the page css panel of the page inspector:

#formloom-page0 input.fl-submit {
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#777777));
background: -moz-linear-gradient(top,  #f1f1f1,  #777777);

All you need to do is change the start and stop colors to your liking.
The same code can be used for the reset button as well, simply change fl-submit to fl-reset.
Then add the custom CSS into the Code panel of the Page Inspector (under CSS).

Color Picker Link:

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk