How would you code this button?

[vaielab]

Hello, I have this button http://i50.tinypic.com/20hvcr6.jpg
This button can be a link or a submit button.

And of course, the width of the button have to change to fit the text

Right now, I have to use a first div with the first 5px of the button (the left part)
As a child, a other div, with a 5px (the right part)
And a third level child, with the text (with a background as repeat-x)

But when it’s a submit button, I have to put the submit button at the first level, and use some position absolute inside relative so all the button is the submit button.

So how would you do it?
Thank you

[Paulie_D]

I’m not sure precisely what it is you are trying to achieve but why not just use the ‘button’ element rather than a series of divs?

http://codepen.io/Paulie-D/pen/GhtsB

[vaielab]

I might be wrong, but if I use an button element the only way to make an action (such as changing the page, like a link), is using javascript?
My button will be links or submit button. (Sorry forgot to mention that… pretty important details, my bad)

[emma]

Take a look at how the Twitter bootstrap buttons are styled, they look very similar to yours.

[Paulie_D]

I still don’t get it.

A submit button uses javascript, a link button doesn’t.

A button is just an element like a div…what it does depends on the content or what you have told it to do.

[vaielab]

@Paulie_D
Here maybe this will help

Button

So this look like a button, but when I click on it, it’s a link, and I get sended to a other page

[Paulie_D]

That’s my point….put the link in a button element.

Codepen updated: http://codepen.io/Paulie-D/pen/GhtsB

[vaielab]

I tried to put the link in a button like such

Test

But even if I press it, I stay on the same page… something I’m missing?

[Paulie_D]

Odd…seems to work when I use a codepen link but not ones external to codepen.

Fair enough.

That being the case, let’s just style your submit button the same way as a link with a class of button.

I think that’s how Twitter Bootstrap does it anyway. http://codepen.io/Paulie-D/pen/KuiDG

[EDIT] I think the previous example works but it looks like it doesn’t like extenal links unless you Ctrl-click the links. Peculiarity of Codepen I guess.

[Author]

Posts