How do you create a custom form submit button?

Get Started
1

Hello everyone,

This is what I’m trying to do.

I want to give user the option to enter their e-mail address and then hit the “Subcribe Now” button to send their e-mail address to me.

The problem is, I want to create a custom “submit button” that will match the design of the page. The regular submit button is not appealing and just too dry.
I want to make the form and then add a fancy button that user can click to send the data.

So the question, how do you create a custom form submit button?

Thanks for all your help.

IC

2

Two option.

<input type="image" src="path/to/image">

<input type="submit">

Then style with CSS

3

You left out option 3.

<button type="submit">custom button content including HTML goes here</button
4

You didd this

</button

Forget the closing > less :wink:

5

Well, I’m not going to be using text, because I will be including the text on the button as a single graphic.

I will be creating the graphic in Fireworks.

Anyway guys I’m a little confused by the addition and subtraction.:smiley:

Which is the best way?

IC

6

Thats like saying what is the best programming language. I would personally use option 1.

7

Just another thought, is there a way to make the image in the button rollover, like applying a hover state?

Thanks everyone.

IC

8

CSS can do that. Javascript can too I think. Not sure

9

I saw the Javascript method but don’t know if it’s really worth it.
Have no ide on the css version.

IC

10

I am not sure but if you assign an id to the input then do like

#idname a:hover

that will style the link. Actually on second thought I only think JavaScript can do it. I have never done it any other way at least.

11

Maybe this post can be of interest. :slight_smile:

12

If you apply the image to a submit button using css background, then you can add a different image for the hover state.