Forms and buttons
Question
I would like to have some guidance on how to make good forms with submit buttons that look flat but not like the default ones that are done when using html. I want the submit buttons like those found on this website.
3 answers
solution1
0 2011-02-03 10:26:00
You should try applying CSS to your submit buttons like follow:
<head>
.......
your html code
.....
<style>
.pass {
width: 105px;
padding: 5px;
margin: 2px;
font-weight: bold;
color: #065fba;
background: #f4f5f8;
font-size: 11px;
border: #e2e2e2 1px solid;
}
</style>
</head>
.......
your html code
.....
<input trpe="submit" class="pass" value="Submit" />
......
...
.
Hope this helps.
solution2
0 2011-02-03 10:31:24
The css use for the 'Post Your Answer' button on this website is (more or less):
input[type="submit"] {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
For cross-browser compatibility you'll need to add a class to your <input type="submit" /> as the CSS [type=""] attribute isn't recognised in older versions of Internet Explorer.
solution3
0 2011-02-03 10:31:26
If you want to see how any element has been styled on any examples you like the look of, use Firebug or its equivalents for other browsers, which will show you the CSS applicable to a selected element.
In Stack Overflow's case, it's this, with the buttons being wrapped with a <div class="form-submit"> :
.form-submit input {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.