How to customize your payment button?

Changing Width

The easiest way to do this is to override the width with a style property on the <a> element part of the embed code. You can add a style like this: style="width:100px;min-width:100px;padding:20px;". Make sure you use both the min-width and width properties.

Here's a default button:

My Awesome Button

Let's change it's width to make it squarer and have more padding. We can edit the following line (note your everbutton ids will be different):


<a id="everbutton-13-1396135457-13" class="everbutton everbutton-13-1396135457-13 everbutton-blue" href="https://stage.everbutton.com/donate/13">


<a style="width:100px;min-width:100px;padding:20px;" id="everbutton-13-1396135457-13" class="everbutton everbutton-13-1396135457-13 everbutton-blue" href="https://stage.everbutton.com/donate/13">

Now the button looks like this

My Awesome Button

Changing Color

Changing color from blue to green is easy. Simply change the class in the above example to say "everbutton-green" instead of "everbutton-blue".


<a id="everbutton-13-1396135457-13" class="everbutton everbutton-13-1396135457-13 everbutton-green" href="https://stage.everbutton.com/donate/13">

...And you get this button

My Awesome Button

Complete Customization (Advanced)

If you want our styles to completely get out of your way, simply remove "everbutton" and "everbutton-blue" classes from the <a> element. This will remove all of the everbutton styling, but the button will still work fine.

You can then add all your awesome styles to the <a> by adding your own classes. Here's an example of using Boostrap's basic button styles:


<a id="everbutton-13-1396135457-13" class="everbutton-13-1396135457-13 btn btn-primary btn-lg" href="https://stage.everbutton.com/donate/13">

My Awesome Button