CODEWITHSUNDEEP
javascripthtmlcssuser-interfacerounded-corners
Buzz
Buzz

Reputation: 1667

Method to render rounded corners on form submit buttons

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?

Upvotes: 1

Views: 25344

Answers (4)

corey
corey

Reputation: 11

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.

Upvotes: 1

marknt15
marknt15

Reputation: 5127

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" />

Upvotes: 9

Hurix
Hurix

Reputation: 433

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.

Upvotes: 1

danpickett
danpickett

Reputation: 2046

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

Upvotes: 2

Related Questions