Method to render rounded corners on form submit buttons

javascript html css user-interface rounded-corners

25,003

Solution 1

Try CurvyCorners (30,100 bytes, minified) for this solution because IE browser will not make it rounded. I haven't tried adding an image though.

<style type="text/css">
.input-rounded-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    padding:0 3px 0 3px;
    display:inline-block;
    text-decoration:none;
    background:#595651;

    color:#FFFFFF;
    cursor:pointer;
    font:11px sans-serif;
}

.input-rounded-button:hover { 
    text-decoration:none; 
    color:#ADD8E6; 
    cursor:pointer;
    border:1px solid #FF2B06;
}
</style>

<input class="input-rounded-button" type="button" value="SEARCH" />

Solution 2

I've been using this method for a while -

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

It works pretty well

Solution 3

If you are able to use CSS3, the easiest way that i know is just to do this:

.button
{
  background-color:#f57070;
  border-radius: 10px;    //-rounding the edges, only available in CSS3-//
  font-family:arial;
  font-size:30px;
  text-decoration:none;
}

with the html code:

<a href=# class='button'>...</a>

makes a nice red button with rounded edges.

Solution 4

Maybe this one is the kind of workaround you are looking for. Though it doesn't support vertical scaling. (Why the hell do you have multiline submit buttons?)

http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

It's specialized for submit-buttons and supports a fairly reasonable browser range.

View more solutions

25,003

Author by

Buzz

Updated on July 09, 2022

Comments

Buzz almost 2 years

What I'm looking for is a clean method to round the corners of all inputs with the class "submit". I've experimented with a number of javascript techniques, but none worked well for form elements. Pure CSS would be great, but, note, the button needs to expand, and will have arbitrary text. Other methods required really ugly HTML cruft around the inputs, which I don't want.

Any ideas?
Buzz about 15 years

That looks like it is for anchors, and does not seem to support vertical scaling. Or am i missing something?
Mubashir Siddique about 15 years

You are missing something - this method can be extended to support the button element - filamentgroup.com/lab/… Don't forget to specify a button type="submit" for IE. I haven't found something with vertical scaling, or had the need for it.
Buzz almost 15 years

This does NOT support form inputs, and does NOT support vertical scaling. Why the hell is this answer being upvoted? I know very well how to deal with buttons, and how to do this without permitting vertical scaling. That's NOT what I asked.
Buzz over 14 years

lol ... i don't have multi-line submit buttons, but if a user zooms in, i don't want the buttons to break.
UpTheCreek about 14 years

Is there a mirror of this page?
Atul Kumar over 13 years

newer IE should support the method above, if not, consider not making them rounded in IE only. I mean really, get with standards already!