How the? Flat submit buttons?

liunx

Guest
How do those people do it. Make flat with colour submit buttons? Also how do those people make those edit boxes flat and have different font colours??<br />
<br />
Thanks<!--content-->Very easy to do, you need to have some css knowlage or styles with IE. Here is some code for a text box:<br />
<br />
<form method="POST" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><br />
<br />
<input type="text" name="Forma Name" size="20" style="font-size: 10pt; color: #FFFFFF; font-family: Verdana; background-color: #000080; border-style: solid"><br />
<input type="submit" value="Submit" name="Form Name" style="font-family: Verdana; font-size: 10pt; background-color: #000080; color: #FFFFFF; border-style: solid"><br />
<br />
</form><br />
<br />
Good Luck,<br />
Paul<!--content-->Heres's one of my toys you can play with:<br />
<br />
<br />
<br />
<html><br />
<head><br />
<title> form as a table </title><br />
<style><br />
<!--<br />
body {background-color:blue;color:gold;}<br />
h1 {background-color:lightsteelblue;color:darkolivegreen}<br />
.input1 {border:3px solid lightyellow;<br />
background-color:lightyellow;color:midnightblue;<br />
margin-top:-1;margin-left:-3}<br />
.input2 {border:3px solid royalblue;<br />
background-color:royalblue;color:antiquewhite;<br />
margin-top:-1;margin-left:-3}<br />
.container {position:absolute;top:160;left:150;<br />
border:5px ridge mediumturquoise; <br />
height:200;overflow-y:scroll;<br />
background-color:saddlebrown}<br />
.thebuttons {position:absolute;left:300;top:360;padding:10;<br />
background-color:mediumseagreen}<br />
.thebuttons input {background-color:seagreen;color:tan;<br />
border-color:blueviolet}<br />
#headings {position:absolute;top:135;left:150;<br />
height:20;background-color:aliceblue; <br />
color:forestgreen;border:1px solid limegreen;}<br />
--><br />
</style><br />
</head><br />
<body><br />
<h1 align="center"> A Form Styled to Look Like a Table </h1><br />
<p> This is IE5+. NS6 might support part of it and it can be made to work<br />
for IE4 by changeing overflow-y:scroll to overflow:auto. Netscrap 4?<br />
forget it, thought it might not degrade to badly.<br />
</p><br />
<form name="fred"><br />
<span id="headings"><br />
<pre><br />
<br />
First column Second column Third column </pre></span><br />
<span class="container"> <br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<input type="text" class="input1"><br />
<br><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<input type="text" class="input2"><br />
<br><br />
</span><br />
<br><br />
<span class="thebuttons"><br />
<input type="submit"> &nbsp; &nbsp; <input type="reset"><br />
</span><br />
</form><br />
</body><br />
</html><!--content-->
 
Back
Top