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

6 replies
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;
}
#button #css #default #form #submit
  • Profile picture of the author Lani
    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.
    {{ DiscussionBoard.errors[9821086].message }}
  • Profile picture of the author 2WDHost
    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;
    }
    Signature
    2WDH.com: Professional cPanel Hosting since 2003
    Really helpful support. You're not a number to us! Programming, database and site development help.
    No overselling. SSD. Real 99.99%+ uptime. Free 2-week trial: no obligation/credit card required.
    {{ DiscussionBoard.errors[9821309].message }}
  • Profile picture of the author ferenan
    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:
    <a href="#" class="cta">Click Here to Get Started</a>
    </div>
    {{ DiscussionBoard.errors[9821420].message }}
    • Profile picture of the author Zenoth
      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. */
      }
      Signature
      {{ DiscussionBoard.errors[9824184].message }}
  • Profile picture of the author Darrenshome
    The most simple form to attach css to any submit button in your page.

    input[type="submit"]
    {
    // put your css here!
    }
    {{ DiscussionBoard.errors[9903133].message }}
    • Profile picture of the author ferenan
      Aow...I see...Thanks for all ...now I got the point.
      {{ DiscussionBoard.errors[9903543].message }}

Trending Topics