nealios Posted November 21, 2007 Share Posted November 21, 2007 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 More sharing options...
ScottR Posted November 22, 2007 Share Posted November 22, 2007 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"> Valid: <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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.