Css Submit button

Using a CSS styled button as a submit button in a form

[grimreaper1]

Is it possible to use this css button;-
HTML
<div id="mybutton">
<ul id="basket1">
<li><a href="#">Add to Basket</a></li>
</ul>
</div>

CSS
#mybutton ul li
{
position: relative;
top: 100px;
left: 100px;
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: none;
background: url(images/mybutton.gif) repeat-x 20px;
height: 20px;
line-height: 20px;
text-indent: 10px;
font-size: 8pt;
font-weight: bold;
width: 94px; /* width of buttons */
}

#mybutton a
{
color: #008800;
text-decoration: none;
display: block;
width: 94px; /* width of border */
border-top: 1px solid #008800;
border-bottom: 1px solid #008800;
border-left: 1px solid #008800;
border-right: 1px solid #008800;
}

#mybutton li#active { background: url(images/mybuttonhover.gif) repeat-x 20px; }
#mybutton a:hover { background: url(images/mybuttonhover.gif) repeat-x 20px; }

-----------------------------------------------
To replace this;-
HTML
<input type="image" id="addtobasket1" name="submit" alt="Add to Basket" src="images/addtobasket.gif" />
</form>
CSS
#addtobasket1
{
position: relative;
top: 150px;
left: 100px;
height: 21px;
width: 94px;
}
Is so how? What do I do about the ><a href="#"> in the origional button
Thank you in advance

[bedlam]

Why not just style the <input ... /> element instead? There's nothing in particular with your css that won't work on <button> or <input ... />.

Further, if you're using a link, you'll have to use javascript to submit the form--which could cause you to lose sales to visitors with javascript turned off in their browsers.

If you have some need to place the button in a list (e.g. because it's in a menu etc), just place the whole <form> into the <li>--it'll validate and shouldn't cause too much in the way of additional styling problems.

-b

[heisters]

Note also that safari and camino do wicked things when you try to style a submit input. So use a <button> instead.

[grimreaper1]

Thank you both for your replies. Bedlam you need to be aware that 4 weeks ago I'd never heard of Css so I'm attempting to sort this out with almost no knowledge. Here is the complete form

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal">
<input type="hidden" name="add" value="1"/>
<input type="hidden" name="cmd" value="_cart"/>
<input type="hidden" name="business" value="info@####.co.uk"/>
<input type="hidden" name="item_name" value="Live Micro Algae Culture"/>
<input type="hidden" name="item_number" value="Product #100"/>
<input type="hidden" name="amount" value="12.50"/>
<input type="hidden" name="page_style" value="Primary"/>
<input type="hidden" name="return" value="http://www.####.co.uk/index.htm"/>
<input type="hidden" name="cancel_return" value="http://www.####.co.uk/index.htm"/>
<input type="hidden" name="no_shipping" value="2"/>
<input type="hidden" name="no_note" value="1"/>
<input type="hidden" name="currency_code" value="GBP"/>
<input type="image" id="addtobasket1" name="submit" alt="Add to Basket" src="images/addtobasket.gif" />
</form>
Please can you explain in more basic terms how I integrate the above form into this
<div id="mybutton">
<ul id="basket1">
<li><a href="#">Add to Basket</a></li>
</ul>
</div>
Sorry to sound so dim but I am a marine biologist not a web site designer
Thank you in advance

[bedlam]

Let's back up a step or two. I don't necessarily want to try to teach you a bunch of javascript if it's not needed...

You're asking how to use a link as a button, but a link isn't a button--even though superficially (i.e. in terms of operation) they appear to work the same way. You can add button-type behaviour to a link with javascript if you need to, but there are some very good reasons to avoid this if it's possible.

What I would like to know is why you want to do this. A good answer to that question will make it easier to figure out what to tell you.

-b

[grimreaper1]

My reason is that my old web site looked out of date and it was slipping down the google ratings. I noticed that there were a number of web sites displaying the W3c verification buttons. I assumed that my google ranking drop was due to my old and unverified web site.
I have updated my site (serious struggle) and it will verify to the W3c standard now but the add to basked buttons are still the old ones. If you go to my profile then to my website you will see what I mean. I just wanted the buttons to look uniform.
Thank you bedlam

[bedlam]

Your site won't be displayed in your profile 'til you've made a whole lot more posts.

But back to the question--given that:

1. links are not buttons,
   
2. links and buttons can, for all practical purposes, be styled identically*
   
3. your current sshopping cart seems to use buttons,
   

...why do you want to use <a href="#">...</a> (a link) instead of <input type="submit" value="..." ... /> (a button)?

The code you've posted doesn't work that way. Presumably, you just need to replace this bit:

 <input type="image" id="addtobasket1" name="submit" alt="Add to Basket" src="images/addtobasket.gif" />

...with something along the lines of:

<input type="text id="addtobasket1" name="submit" value="Add to Basket" />

...and:

#addtobasket1 { /* CSS for submit button */ }

-b

* With some small exceptions, as mentioned, for Safari and Camino at least...

[grimreaper1]

Thank you bedlam for your comments. I will have a play with your suggestion later and let you know how I do. It is difficult for someone like me to ask a question in such a way that an expert understands what I'm trying to do and for that expert to pitch his answer at a level I understand. Thank you once again for your time

Best Regards

[grimreaper1]

Hello bedlam
I have done what you said above with the code. I then created a jpg button that looked like the css style ones. The text has not come out exactly as the css but it is good enough. I now see that what looks like a button with css is not a button in the true sence of the word. Thank you so much for your patience and time

Best Regards