Play Around With BitBtn Styling


Here are all of BitBtn's States:
(don't click them - it will change the state)

Colors

To change the colors of a button, simply set the 'backgroundColor' and 'textColor' properties of the button.

btn = bitbtn.create( document.getElementById("location-for-the-bitcoin-button"), { address: "1CiesvEUNg9sVm8ekhMrGyATvEnH5YU9wh", amount: 1.247, currency: "USD", backgroundColor: "#7070ff", textColor: "white", });

Customization

You can change how the button looks, by including a CSS file with the right ID.

<link rel="stylesheet" href="custom-bitbtn-style.css" id="bitbtn-css">

The BitBtn scripts adds a default style for the buttons if the element with this ID is not present. If it is, BitBtn will not touch the style of the button. This allows for some pretty cool customization.

When designing new stylesheets, please make sure that the button remains functional. Please make sure that the style looks good on all browsers, operating systems and screen sizes. Keep in mind that devices with the same physical screen size can have vastly different resolutions.

Extending existing styles

If you are relatively happy with the existing style, but want to change a single feature, simply add your style link anywhere in the body of the HTML document.
(the default style is always added at the bottom of the head of the HTML)

If you are using a custom style that you want to tweak, just make sure you put the edit bellow the custom style link.