How to use a css button instead default submit button in form

by 6 replies
8
Hi warriors,
I want to use a CSS button in a opt in form instead of default button but can't do it.
many thanks for any help...if you can outline here the code would be much better for me.
the code for submite is:
<input name="submit" type="submit" value="Submit" >


the code for css is as below:

a.cta {
background: url('images/cta.png') no-repeat;
display: block;
width: 263px;
height: 37px;
color: #fff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
padding: 11px 0 0 63px;
}
a.cta:hover {
color: #ffdc17;
}
#programming #button #css #default #form #submit
  • Change

    Code:
    <input name="submit" type="submit" value="Submit" >
    To

    Code:
    <input name="submit" type="submit" value="Submit" class="btn">
    And add to CSS
    Code:
    .btn {
   
}
    Now you can style your button as you want.
  • Hi.

    You can try this:
    HTML Code:
    <input name="submit" type="submit" value="Submit" class="submit-button">
    HTML Code:
    .submit-button {
    background: url('images/cta.png') no-repeat;
    display: block;
    width: 263px;
    height: 37px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    padding: 11px 0 0 63px;
}
.submit-button:hover {
    color: #ffdc17;
}
  • Thanks for the reply,

    But the button type , type you are mentioning is "submit" which in my case should be "image".(not sure).
    I used the above code but I have now show two buttons over each other for the form.
    I have my own image that you can see in the css code showing "cta.png" as included all css code for the image such as color size ...etc.

    for the link and hover ,I have the css:
    • [1] reply
    • You can't use a "a CSS button". CSS is only used to style the HTML button.
      I do not really understand the question and what you want to achieve.

      If you want to use a image instead of a HTML button, use the following code:
      Where the value of the src should be the image URL.

      HTML:

      HTML Code:
      <input type="image" src="http://example.com/submit.gif" alt="Submit" class="btn-img">


      CSS:

      Code:
      .btn-img {
/* CSS for button here: give your button margin, padding, border etc. */
}
  • [DELETED]
  • The most simple form to attach css to any submit button in your page.

    input[type="submit"]
    {
    // put your css here!
    }
    • [1] reply
    • Aow...I see...Thanks for all ...now I got the point.
  • [DELETED]
Join the discussion

Next Topics on Trending Feed