Jump to content

CSS and Html form Submit Button


Recommended Posts

Hello,I have been creating CSS buttons and using the following way of displaying. <a href="jobadmin.php?JobID=$JobID&op=5&move=2" class="button" span class="icon">However i now have a html submit button but i cant implement it in the same way. Is there a way to use my css code on the submit button?<input type="submit" value=" Do It ! " />Css code is as follows

 /* button styles */a.button, a.buttonDis {display: block;background-color: transparent;background-image: url(buttonBackground.gif);background-repeat: no-repeat;width: 132px;height: 28px;margin: 5px auto;padding: 5px 0 0 0;text-align: center;font-family: Arial, Helvetica, sans-serif;font-size: 100%;font-weight: bold;text-decoration: none;}a.button:link, a.button:visited {color: #002577;}a.button:hover, a.button:active {background-position: 0 -36px;color: #FF7200;}a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {background-position: 0 -72px;color: #5F5F5F;cursor: default;}.icon {display: inline-block;background-repeat: no-repeat;padding: 0 0 5px 18px;}a.button:hover .icon, a.button:active .icon {background-position: 0 -28px;}a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {background-position: 0 -56px;}/* list of button icons */#buttonOK .icon {background-image: url(ok.gif);}#buttonCancel .icon {background-image: url(cancel.gif);}#buttonImport .icon {background-image: url(import.gif);}

Link to comment
Share on other sites

Ok, first thing is that your code for your link is invalid. You cannot have span "inside" your a tag. You can nest it inside the link.Invalid:

<a href="jobadmin.php?JobID=$JobID&op=5&move=2" class="button" span class="icon">


<a href="jobadmin.php?JobID=$JobID&op=5&move=2" class="button"><span class="icon">text</span></a>

Or just add the styles to the button class. (That's what I would do.)Second, add an id or class attribute to your submit button and style accordingly. I assume you know the submit button links to the action in the form.Whoops. Just noticed your using a background image. In that case use an image as your submit button.

<input type="image" name="search" src="search.gif" border="0">

If I remember right.... It's been awhile since I used an image as a submit button.Good Luck,Scott

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...