Installation

If you haven't already, Install the Elements library.

Then, add the following HTML snippet on your page:

<div givebutter-element='button' givebutter-campaign='YourCampaignCode'></div>

Attaching to an existing button

The button elements supports several themes designed to match your websites design.

givebutter-theme="click-only" will create a button out of any existing HTML element. This can be used on any HTML element, such as buttons, links or images, and will show a donation form when clicked!

<button givebutter-element='button' givebutter-campaign='YourCampaignCode' givebutter-theme="click-only">Donate!</button>

There is also a text-only theme for dynamic elements that will keep your existing styles, but update the contents of the element with whatever label you pick in the dashboard. This allows you to add a dynamic button to your site that you can control through the Givebutter Dashboard.
When using the text-only theme only the campaign and label settings in the Dashboard will be used. (Color and other styling settings are not applied)

<button givebutter-element-id="1234" givebutter-theme="text-only">Donate!</button>

Configuration

You can configure how the button appears using the following attributes:

AttributeDescriptionDefaultType
givebutter-labelText shown in the buttonDonateString
givebutter-label-colorText & Icon Color#FFFFFFHex Color Code
givebutter-background-colorBackground color of the button#FF8A00Hex Color Code
givebutter-iconIcon to show in the button:
'heart' or 'none'
heartString
givebutter-drop-shadowShow a dropshadow under the buttontrueBoolean
givebutter-border-radiusBorder Radius (Used to create rounded corners)100Number
givebutter-border-colorColor of the border(Empty string)Hex Color Code
givebutter-border-widthWidth of the border0Number
<span givebutter-element='button' givebutter-campaign='YourCampaignCode' givebutter-label="Donate to this years campaign"></span>