CSS style for external Donate-Button Generator

Support
#1

Hi there,

I hardly have any experience in CSS, but still I would like to have a nice looking button :grin:
I would like to add an “Donate-Button” to my integrety-styled web site.
The german provider of the payment-link gives the oppurtunity to add CSS for individual styling when generating the button.
Now, what do I have to put in?

something like

.x-btn x-btn-global

or all this?

.x-btn:hover, .button:hover, [type=“submit”]:hover {
color: #ffffff;
border-color: rgb(170,124,9);
background-color: hsla(44,100%,49%,0.66);
text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
}
.x-btn:hover, .x-btn:active, .button:hover, .button:active, [type=“submit”]:hover, [type=“submit”]:active {
outline: 0 !important;
}
.x-btn:hover, .button:hover, [type=“submit”]:hover {
text-decoration: none;
color: #fff;
border-color: #600900;
background-color: #df1600;
}
…

or also

.x-integrity.x-integrity-light { }

My button is flat, rounded, size regular, color (see above)
I would be glade for any help.

thanks
Tanja

#2

Hi There,

Please provide your URL and let us know where the button is placed.

Thank you

#3

This is the URL:

Now you can see a PayPal-button, but it should be replaced.
This page is built in cornerstone and the link should also appear in a sidebar/widget.

Thank you in advance
Tanja

#4

Hi Tanja,

Thank you for the URL. Those CSS you have suggested is very general and it might affect all other buttons on the entire site which is not ideal. It will not also work for that specific button because it is not using normal X button but rather paypal button which has different structure. Let’s use more specific selector like the following:

#text-6 form input[type="image"]:hover {
text-decoration: none;
color: #fff;
border-color: #600900;
background-color: #df1600;
}
#text-6 form input[type="image"] {
 border: 3px solid green;
 color: #ffffff;
 border-color: rgb(170,124,9);
 background-color: hsla(44,100%,49%,0.66);
 text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
 }

To inspect element to which selector to use, see this: https://screencast-o-matic.com/watch/cbjbiOl70m
We start with unique identifier of the widget which is text-6 inside the widget, there’s a form, and then the paypal button is an image.

Hope this helps.

#5

Hi Lely,

thank you very much for your help and the nice little video!!
I think I understand a little bit of what you are saying…

Mentioning Cornerstone was confusing, I guess.
I do not need the CSS class for cornerstone – I need it for the payment service provider (Giropay).
When generating the donate-button there I have the opertunity to ad CSS class, to make their button look like my x-buttons.

This URL shows the style of buttons I’m using:

Thanks
Tanja

#6

Hi Tanja,

You seem to have your answer on your original post. If the generated button code allows you to put a class, then adding a class x-btn x-btn-global to your button should do the trick.

Can you clarify what is the issue when you tried that? And can you provide us the generated button code in a “Secure note” so we can take a closer look.

Thanks,