Basics of CSS in bucket.io - Buttons

Advanced customization is a feature located at the Design Page, recommended for users with advanced developing skills since it is all about writing code, however if you are feeling adventurous rest assured you can reset it to the original format. here are some basic tips to change the design aspect of your funnel (if you are having problems seeing pictures in this article, click any and they will expand).


Changing color

There are two areas of the code to take into account when changing the color of buttons:
 
  • The first one is the color that will display when the button is enabled:
Within the CSS code locate the portion that says bucket_button_color{ and replace the color code (in the example we have used #E0184D) by the one you wish to use and click "save changes" button located at the top right corner of the page.


 
  • The second aspect is the color displayed when you only hover the mouse over the button:
Within the CSS code locate the portion that says bucket_button_color:hover{ and replace the color code (in the example we have used #E0184D) by the one you wish to use and click "save changes" button located at the top right corner of the page.

 
  • The third aspect is the color displayed when hitting the tab key:
Within the CSS code locate the portion that says btn-floating:focus  and replace the color code (in the example we have used yellow) by the one you wish to use and click "save changes" button located at the top right corner of the page.