PDA

View Full Version : CSS button & Paypal?


dsnyder
04-09-2007, 06:54 PM
Iíve created a CSS ĎAdd To Cartí button but can figure out if I can make it work with Paypal. Does anyone have any experience/thoughts on this?

Paypal provided code
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="http://cellocelli.com/Images/Buttons/AddCart2.png" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="dsnyder@phoenixensemble.com" />
<input type="hidden" name="item_name" value="Elegy (BRUBECK) - score and parts" />
<input type="hidden" name="item_number" value="DB105" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>
Is there a way to paste some of this into my CSS button code
<a href="#">Add to Cart</a> To make the link work? I clearly would want to remove the
input type="image" src=http://cellocelli.com/Images/Buttons/AddCart2.png part of their code.

domedia
04-10-2007, 02:42 AM
It could be as simple as designing your own button in Photoshop or similar and replace the image referenced in the src attribute.
<input type="image" src="http://cellocelli.com/Images/Buttons/YOURIMAGE.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
Will that do it?

dsnyder
04-10-2007, 03:04 AM
Hey Thanks,
It could be as simple as designing your own button in Photoshop or similar and replace the image referenced in the src attribute Oh ya, that is what I have now and it works. (I can't seem to keep the image inline with the other text before it though)

http://cellocelli.com/basiclayout1.htm

What I was hoping was possible was that I could use a css button that I created and some how have the Paypal for use that as itís source? I canít figure it out. Any thoughts on that?

my css button
#button {
}

#button a:link, #button a:visited
{
float: left;
margin: 2px 5px 2px 5px;
padding: 2px;
width: 100px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid black;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
background: #cccccc;
text-align: center;
text-decoration: none;
font: normal 10px Verdana;
color: black;
}

#button a:hover
{
background: #eeeeee;
}

a:active
{
border-bottom: 1px solid #eeeeee;
border-top: 1px solid black;
border-right: 1px solid #eeeeee;
border-left: 1px solid black;
}

domedia
04-10-2007, 03:13 AM
ah yes, don't use an anchor tag <a> because you're sending form info, just add a input type text, add a class or ID to it, and style it with CSS.
<input type="text" id="button">

dsnyder
04-10-2007, 03:28 AM
A further example of my desires...I'd like to be able to use the css 'View Cart' button/link at the top to get people to their Paypal cart.

http://cellocelli.com/basiclayout1.htm

So many issues:)

dsnyder
04-10-2007, 03:31 AM
ooo, just got your speedy reply. I'll try it out. thanks.

dsnyder
04-10-2007, 02:17 PM
Ok. So adding <input type="text" id="button"> does create a button area. Nice.
ButÖ
Just an empty generic(default?) button. My css button properties are being used.
How do I get it to act as a button w/added text, hover state and link me to Paypal as the 3rd (image)button does? I have my three button sample here (a css button, a css button w/in the <form target=, and an image button whose link works)

http://cellocelli.com/button.htm

#button { float: left;
margin: 2px 5px 2px 5px;
padding: 2px;
width: 100px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid black;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
background: #86A0F4;
}
<div id="button">
<p><a href="#">ADD TO CART</a></p>
</div>

<div id="button">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="text" id="button" border="0" name="submit" alt="ADD TO CART" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="dsnyder@phoenixensemble.com" />
<input type="hidden" name="item_name" value="Elegy (BRUBECK) - score and parts" />
<input type="hidden" name="item_number" value="DB105" />
<input type="hidden" name="amount" value="25.00" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
</form>

</div>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div align="right">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="dsnyder@phoenixensemble.com">
<input type="image" src="http://cellocelli.com/Images/Buttons/ViewCart.png" border="0" name="submit" alt="View Cart">
<input type="hidden" name="display" value="1">
</div>
</form>

domedia
04-10-2007, 02:38 PM
Since you don't want to use an image, you're doing this the hard way8)
In order to only use CSS, it has to be an anchor <a>.

Since we can't do this, we're using a form, we have to use javascript to change the style properties. I'm not a scripter, but it would be something like this:
<input onmouseover="this.style.background='red'; this.style.color='blue';" onmouseout="this.style.background='blue'; this.style.color='red';">

Hopefully someone else can help more, this starts to go beyond my skillset :)

dsnyder
04-10-2007, 02:55 PM
this starts to go beyond my skillset Oh, boy. Iíd better be careful. Maybe I can stick with the image button. Iím a cellist so I probably should be practicing that. I try messing around with your latest suggestion.

My main desire is to create and attractive ĎView Cartí & ĎContactí area in the header of my page. Using a .gif with a transparent background has left me with text that wasnít very crisp. The css version looks pretty clean. Am I maybe doing something wrong in my creation of my .gif image?

Also when I used the .gif image I couldnít create the correct alignment once the Paypal code was added. Maybe that is an easier fix than me css button stuff? Any advice?

http://cellocelli.com/basiclayout1.htm

domedia
04-10-2007, 03:17 PM
Using a .gif with a transparent background has left me with text that wasn’t very crisp. The css version looks pretty clean. Am I maybe doing something wrong in my creation of my .gif image? I think this is the case.

If you don't have a specific reason to make a transparent gif, then don't. From looking at your page, there's no reason (I can see) that the gif needs to be transparent. Make sure you look closely at the 'save for the web' option in PS. Make sure you use enough colors, you can check this in your preview when exporting, and make sure you know what all the options are.

To be safe there's no reason why 256 colors dithered should work perfect.

dsnyder
04-10-2007, 03:31 PM
From looking at your page, there's no reason (I can see) that the gif needs to be transparent. Iím using transparent because I have a background image that I want the text(button) to sit on top of. Is that image not appearing on your browser?

Iíll check my Ďsave for the webí settings. Iím trying to make a transparent button with white text. Iíll try again w/ PS to see if I can do it better. Thanks.

domedia
04-10-2007, 03:59 PM
Make sure you set a color the transparency should work with. I see no background image.

dsnyder
04-10-2007, 04:28 PM
I see no background image.:confused:

http://cellocelli.com/basiclayout1.htm should have an bkgd image in the banner & footer. ???

What browser are you using? Guess that shouldn't matter...

domedia
04-10-2007, 04:34 PM
Yes i see that background, but the 'add to cart' button is not there.