How to apply borders to the submit button?

[ReportingAnalyst]

Hi,

I would like to apply the same feature of a regular submit button to my submit button. I just formatted the color and the font. How to make it look like a submit button? Now it looks like a small rectangular box with that background and text in it. It does not look like a submit button.

My css code is:

.btn
{
color:#5a5b5e;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-weight:bold;
background-color:#C7D9E6;
}

My html code is:

<input type="submit" value="Request Reports" class="btn">

 

[mbrooks]

<style type="text/css">
<!--
.button {
	border: 1px solid #000000;
}
-->
</style>

<input class="button" type="submit" value="Request Reports" class="btn">

M. Brooks

http://mbrooks.info

 

[mbrooks]

Oops.. I didn't notice that you actuall defined the input class. Use this one instead.

.btn {
	background-color: #C7D9E6;
	border: 1px solid #000000;
	color: #5a5b5e;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-weight: bold;
}

M. Brooks

http://mbrooks.info

 

[ReportingAnalyst]

Thanks for the input. How to make it look 3 dimentional the way it looks for the normal submit button?

My button looks like a flat colored rectangle with borders.

Thanks.

 

[vacunita]

Your button is already a submit button, just take away the class.

<input type="[red]submit[/red]" value="Request Reports" class="btn">

change to:

<input type="[red]submit[/red]" value="Request Reports">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[ReportingAnalyst]

If I were to remove the class, I would not have a background color for the submit button.

Thanks.

 

[vacunita]

You want a Windows style submit button that is slightly blue right?

The short answer is you can't when you apply a background to a submit button it looses the Windows look you want.

You would need to make an image and apply it as a background to the button. Otherwise you'll get the rectangular box.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

vacunita is right. Give up. There is no way you can change the appearance of the default IE/WinXP button. But then again, do you know that only users of IE/WinXP see it like that? Other browsers/OSes may be doing something completely different. Check here:

http://www.456bereastreet.com/lab/form_controls/buttons/

 

[ChrisHunt]

How to make it look 3 dimentional

Just give your borders different colours:

.btn {
    background-color: #999;
    border: 2px solid #666;
    border-top-color: #CCC;
    border-left-color: #CCC;
    color: #5a5b5e;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-weight: bold;
}

On windows, the "light source" is considered to be at the top left, so the top and left borders should be lighter, and the right and bottom borders should be darker, than the face of the button. The result is a simple 3D effect.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd