Forums

Can submit button use a .jpg? Like a PayPal button?

farmington 25 Feb, 2015
I'm incorporating PayPal, and I would like the submit button that causes the PayPal link to open to be able to use a PayPal .jpg as its image. I guess it's really a more general question, as to whether submit buttons can ever use an image rather than just the Value/Label parameter. But for PayPal payments, it really is almost universal for the link to be a PayPal image. Thanks.
farmington 25 Feb, 2015
Sorry, I had searched the forums for the answer. I forgot I need to search the FAQ separately.
farmington 25 Feb, 2015
OMG, I feel like I'm asking a ton of questions, but I try everything I can think of, and search the forums etc, forever before asking.

I've followed the FAQ and it still doesn't work quite right.

I have a button, type is submit, class is PayPal_btn.

I've added a Load CSS action to the Form Load event, with the following code:

.PayPal_btn {
  background: url(images/PayPalPayNowButton.jpg) 0 0 ;
  width: 150px;
  height: 100px;
}
.PayPal_btn:hover {
  background: url(images/PayPalPayNowButton.jpg) 0 0 ;
}


It clearly links to the CSS class, because when I hover over the button, the PayPal image comes up. But it isn't there otherwise. Please help! I know it shouldn't be this difficult.
GreyHead 27 Feb, 2015
Hi farmington,

It looks as though some other CSS is over-writing the non-hover style. Please post a link to the form so I can take a quick look.

Bob
farmington 28 Feb, 2015
1 Likes
Well, with Bob's help I was able to get it working using the ID rather than the CSS class. Now my button has the ID of pp_submit, and the following code was added to the Load CSS action:

#pp_submit{
  background-image: url(/images/PayPalPayNowButton.jpg);
  background-repeat: no-repeat;
  width: 131px !important;
  height: 48px;
  border: none;
 }


Not sure why it wasn't working the other way, but this may help anyone else who experiences the same odd behavior.
GreyHead 28 Feb, 2015
Hi farmington,

The FAQ was written originally for CFv3 and there have been quite a few changes in the CSS from there to CFv5; in particular there is some quite specific CSS that sets e.g. the button width and it can take some creativity to find a way to over-ride that.

Bob
This topic is locked and no more replies can be posted.