To use button or input type?

HTML & CSS
1

hey folks,
i m working on web app. now a change has come up,that when a button should be clicked, it should look like its pressed (i made a image slight different from real one), now having said that, for now i m using input type=“submit”>, i never tried anything like that on a input type. so how do i do it? i donno JS, how can i do it? should i use button tag?

2

sure :slight_smile:

/*normal appearence*/
button[type="submit"] {background: url(button.img) no-repeat left top}
/*when hover over it*/
button[type="submit"]:hover {background-position: left center}
/*when pressed*/
button[type="submit"]:active {background-position: left bottom}

or, if you go with a class:

<button type="submit" class="emaarkhanButton">

/*normal appearence*/
.emaarkhanButton {background: url(button.img) no-repeat left top}
/*when hover over it*/
.emaarkhanButton:hover {background-position: left center}
/*when pressed*/
.emaarkhanButton:active {background-position: left bottom}

this example assumes that the background image for your button is button.img, which is a sprite having stacked in it three “images”: at the top the image for normal state, in the middle for the hover event and at the botoom for the press event. one thing also left to you to decide it’s the height of the button element that has to be 1/3 of the height of the image.

this really is for the css forum :slight_smile:

3

my example it’s not inline css in any way, shape or form :slight_smile:

of course you can use id or class attributes.

4

yes i know css, but in that u have put inline css. can i class them up?

5

you have your answer in the [URL=“http://www.sitepoint.com/forums/showthread.php?t=695384”]previous thread you’ve asked help

all you have to do is to use attribute selector for the button element:

button[type="submit"]

instead of

input[type="button"]

and you need a bit more of css knowledge; the problem is not your js knowledge here :slight_smile: because attribute selector may not work for all your page visitors! but you have pleny of options!

6

how can i elaborate on normal state and click state in css and applying the style to it?

7

Yes, sounds like a job for the button element. You can style it any way you like, with styled text, or a sprite image etc.

<button type="submit" value="" name="">Send Message</button>
8

could u write me the code again for input like u said. please?