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).
A:
You could use the HTML element instead of input type. It's quite easy to style that one.
GoodEnough
2009-09-08 06:17:21
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
2009-09-08 06:21:01
There's a button HTML element and it's sort of like a DIV. Take a look at this wonderful article: http://particletree.com/features/rediscovering-the-button-element/
GoodEnough
2009-09-08 10:28:53
+2
A:
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.
peirix
2009-09-08 06:20:01
[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 Reed
2009-09-08 06:21:42
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
2009-09-08 06:50:26
A:
<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.
rahul
2009-09-08 06:33:38