Welcome!

[Cozmika]

Here is the button that I need to make.
What is the most simple way to code that? I wanna use it with random text so I just can't slice all that image......
( if there is some similar tuts, please link )

[Andy]

First of all, what is it for?

Is it for navigation or is it for action (e g. form submissions)?

[Cozmika]

It is 'standalone' button for submissions and that stuff... I made something but it is full of divs, so I have div hell. I now that there is a way to do this with span class... But I really didn't code for a long time, I've forgotten

[Andy]

It is 'standalone' button for submissions and that stuff...

So it's for a form ?

[Cozmika]

It will be used in forms... But I would like to use it like link to some actions like adding content...

[Andy]

It will be used in forms... But I would like to use it like link to some actions like adding content...

Either it's a link or it's a form button. You can't have both. If you need both then you need to create two versions.

Form button example:

Code: Select all

button {
   background: white url(gradient.png) repeat-y;
   border: 1px solid #c9c9c9;
}

button span {
   background: url(add.png) 0 5px no-repeat;    
   display: block;
   line-height: 26px;
   width: 150px;
}


Code: Select all

<button type="submit"><span>Neki Link</span></button>

[Cozmika]

Code: Select all

button {
   background: white url(gradient.png) repeat-y;
   border: 1px solid #c9c9c9;
}


I can't do that because button has beginning and ending with shadows and corners, and that's my my problem. I made 3 classes + one more for icon.

So class btn1 is that left few pixels, btn2 is where my text goes and it's flexible, btn3 is right end. But I remember reading tuts year ago that there is cleaner way to do this.