I am trying to create a css submit button that resizes with the button
text, has transparency and a hover effect. I have it all working well
except the hover. When the mouse hits the far left side, it rolls
over, but the rest of the button does not.
Here's my code:
<label class="contentSubmitButton">
<input type="submit" name="submit" id="submit" value="go"
tabindex="2"/>
</label>
.contentSubmitButton{
background: url(../buttonImages/submitButtonLarge.png) no-repeat top
left;
display: block;
font:Verdana, Arial, Helvetica, sans-serif !important;
font-size:13px !important;
height: 38px;
width: 16px !important;
overflow: visible;
padding: 0px 0 0 0px !important;
}
.contentSubmitButton:hover{
background-position: bottom left;
}
.contentSubmitButton input,
.contentSubmitButton #submit {
background: url('../buttonImages/submitButtonLarge.png') no-repeat top
right;
height: 38px;
font:Verdana, Arial, Helvetica, sans-serif !important;
font-size:13px !important;
color: #02004c;
margin: 0px 0px 0px 16px !important;
display: block;
border: none 0px;
padding: 0px 16px 4px 0px;
background-color: transparent;
cursor: hand;
cursor: pointer;
line-height:15px;
}
.contentSubmitButton input:hover,
.contentSubmitButton #submit:hover {
background-position:bottom right;
}
Help please! I have been struggling with this for some time. I don't
want to use the button tag because I have heard that it has trouble
submitting forms in some cases. Thanks!
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
