Member Avatar for Member #940193

i want to know how to use css with html forms

i have css button

<style>
a.btn {
    display: block; width: 120px; height: 18px; padding: 18px 0 0 0; margin: 0 auto;

    background: #398525; /* old browsers */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 10px;

    font: bold 20px/01px Helvetica, Sans-Serif; text-align: center;
    text-transform: uppercase; text-decoration: none;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px #b4d1ad;

    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

    a.btn:hover {
        color: #145675;

        -moz-transition: color 0.25s ease-in-out;
        -webkit-transition: color 0.25s ease-in-out;
        transition: color 0.25s ease-in-out;
    }
</style>

<a href="#" class="btn">Push</a>

i want to use this button is form search button
i tried
<input type="submit" class="btn" name="submit" value="search" />

but it can not work

Edited by Member #940193
  • 3 Contributors
  • 3 Replies
  • 237 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Member #940193

Dani AI

Generated

Short answer: your styles only matched links, so a real form control didn’t pick them up. As pointed out, make the selector generic (so it applies to inputs and buttons), or target form controls specifically like suggested. Better: use a semantic form button and a class-based rule that works for any element.

Example HTML (use inside your <form>):

<button type="submit" class="btn">Search</button>

Example CSS (modern, works for button or input with class="btn"):

.btn, button.btn, input.btn {
  display: inline-block;
  padding: 10px 18px;
  box-sizing: border-box;
  cursor: pointer;
  background: #398525;                    /* fallback */
  background: linear-gradient(to bottom, #8DD297 0%, #398525 100%);
  border: 1px solid #5ea617;
  border-radius: 10px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.35);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn:focus {
  outline: 3px solid rgba(61,133,221,0.25);
  outline-offset: 2px;
}

.btn:hover { color: #145675; }

Troubleshooting notes: check DevTools to confirm the element has the class and which rule wins; clear cache if CSS changes don’t show. Avoid using an anchor (<a>) to submit forms — anchors don’t submit without JS and are less accessible. Also watch the font shorthand in your original stylesheet (a tiny line-height can collapse text); use sensible padding or line-height to vertically center text. Finally, prefer the standard linear-gradient (vendor prefixes are largely obsolete now) and always include a solid fallback color for very old browsers.

Recommended Answers

All 3 Replies

Member Avatar for simplypixie

That is because your class btn has been assigned to a (link) in your css and a submit button isn't a link. Just remove the a from a.btn in your stylesheet and that should work.

Member Avatar for spammyyammy

If you wanted the css to just apply to the submit button you could change your css to be:

input[type=submit].btn{

This will apply the css to any submit buttons that use the class "btn" rather than just links that use the clas btn.

Member Avatar for Member #940193

thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.