9

How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).

1
  • 2
    I think looking at SO's source would have been as fast ;). Sep 8, 2009 at 7:22

6 Answers 6

10

Use the following field and command in your css:

border-radius: 0;
8

Just add CSS to it, and the default look will dissappear.

input.button, input.submit {
   border: 1px outset blue;
   background-color: lightBlue;
}

edit: changed the selector to use class name instead, as suggested in comments.

3
  • 1
    [type=button] might not always be supported on certain browsers, so you are often better off applying a class to all buttons you want styled that way...
    – Nathan
    Sep 8, 2009 at 6:21
  • 1
    Isn't it better to provide a class name for that?
    – rahul
    Sep 8, 2009 at 6:36
  • Yeah, I was just demonstrating a quick way to set it up.. That type of selector is supported on almost all browsers after IE6, though, so it might not be an issue. But it would of course be better to use classes if you are concerned with old browsers.
    – peirix
    Sep 8, 2009 at 6:50
1

You could use the HTML element instead of input type. It's quite easy to style that one.

2
  • I am not really sure what you mean. My HTML looks like this <input type="submit" name="submit_comment" id="submit_comment" value="Submit" />
    – Ankur
    Sep 8, 2009 at 6:21
  • 1
    There's a button HTML element and it's sort of like a DIV. Take a look at this wonderful article: particletree.com/features/rediscovering-the-button-element
    – mbillard
    Sep 8, 2009 at 10:28
1

If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.

input.button, input.submit {
   height: 30px;
   width: 20px;
}

I seem to remember this only working if the height is large enough, but it might work any which way.

0

Use border: 1px solid for the element.

0
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>

This is how a stackoverflow button is made.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.