Forum Moderators: open

Message Too Old, No Replies

Submit button.

Altering the look of it

         

creative craig

1:06 pm on Nov 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can anyone tell me how on the easyjet website they have been able to make their form buttons with an orange background and also change the colour of the text.

Also is it me or have the made the edges of the buttons square, my normal buttons are all rounded by default with Windows XP.

I have been going through their css files and can't seem to get it to work in Dreamweaver MX :(

Craig

JayH

1:36 pm on Nov 6, 2003 (gmt 0)

10+ Year Member



Hi,

I've found that you could do it by assigning a stylesheet class to your button.

<head>
<style>
.button_style{ background-color:#FF0000;
color:#333333;
}
</style>
</head>

<body>
<input name="buttom" type="button" class="button_style" id="buttom" value="My Button">
</body>

I haven't fully explored all the options available but this should work.

Hope it helps.

divaone

1:37 pm on Nov 6, 2003 (gmt 0)

10+ Year Member



set input to show a background color:
input {background-color:#000000;}

you could also use transparent as your selected color but i'm not sure if that will validate.

mcfly

5:07 pm on Nov 6, 2003 (gmt 0)

10+ Year Member



Hi,

It's possible to use any image as a submit buttom simply by replacing

<input type="submit" etc.
with
<input type="image" src="/image/path/image.gif" ...

I suspect this may cause problems with browsers that disallow images, but it's one way to do it anyway.

bruhaha

5:24 pm on Nov 6, 2003 (gmt 0)

10+ Year Member



If you go this route, be aware that the cursor will not change on mouseover. So, to make sure people know the button will function you may wish to add a declaration to your "button" class:

cursor:pointer;

jetboy_70

5:36 pm on Nov 6, 2003 (gmt 0)

10+ Year Member



divaone, you're a star!

The problem with using graphics for buttons is that you need to use Javascript to make them act like submit buttons, so without Javascript enabled the form stops working. However, extrapolating divaone's idea:

<form name="" method="post" action="submit">
<div style="background-color: #000000; height: 50px; width: 50px;">
<input name="" value="" type="submit" style="background-color: transparent; border: 0; width: 50px; height: 50px;"></div>
</form>

A transparent HTML form button which shows through everything in the background. I like it. I like it a lot. :)

creative craig

12:11 pm on Nov 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Its working great at the moment, the only thing is that I cant get the border to show up.

Anyone have an answer? :)

keyplyr

4:20 am on Nov 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Try this:

border:1px solid #000;