Page 1 of 2
Best buttons
Posted: Wed Apr 29, 2009 11:26 pm
by JellyFish
What is the best way to create considerably good, cross-browser submit buttons? I'm looking for a real clean solution that requires very little html markup. If anyone has some good pointers for me on this I'd really appreciate it.
Thanks for reading.
PS: I mean for this thread to be more of a discussion on this subject, rather then a quick answer.
Re: Best buttons
Posted: Wed Apr 29, 2009 11:48 pm
by Benjamin
I'd say the best bets are images or css.
Re: Best buttons
Posted: Thu Apr 30, 2009 2:26 am
by Christopher
There was an article about how they created the buttons in Gmail a while back. Search and perhaps you can find it.
Re: Best buttons
Posted: Thu Apr 30, 2009 1:56 pm
by JellyFish
arborint wrote:There was an article about how they created the buttons in Gmail a while back. Search and perhaps you can find it.
I think I read that article.
I'd say the best bets are images or css.
Yea I think I'm looking for a css solution; should have mentioned that in OP. I don't want images, because they're not dynamic; there's no way to change the text in an image.
What kind of HTML and CSS do you guys use when making buttons?
Re: Best buttons
Posted: Thu Apr 30, 2009 2:06 pm
by Christopher
JellyFish wrote:I think I read that article.
If you find it, post it. Perhaps we could work through developing a solution based on what they did. You could also look at the source to Gmail.
Re: Best buttons
Posted: Thu Apr 30, 2009 6:11 pm
by JellyFish
I think I found it. The solution seems good, but I don't know if it's too much for a button. Maybe this is what it takes to get something working cross browser.
Re: Best buttons
Posted: Thu Apr 30, 2009 6:20 pm
by Benjamin
Re: Best buttons
Posted: Thu Apr 30, 2009 7:06 pm
by Christopher
JellyFish wrote:I think I found it. The solution seems good, but I don't know if it's too much for a button. Maybe this is what it takes to get something working cross browser.
It looks like it is just a small stylesheet and:
Code: Select all
<a><span><span>Button Text</span></span></a>
Re: Best buttons
Posted: Thu Apr 30, 2009 7:11 pm
by JellyFish
The only thing is, I want to be able to use this button to submit a form and I don't want to have to write some javascript to mimic this feature.
Re: Best buttons
Posted: Thu Apr 30, 2009 10:59 pm
by Christopher
Then you need to use one of the form button elements. Probably image button if you want a consistent look. But honestly, why don't you want to use Javascript? It is there in every browser just waiting to do things like this.
Re: Best buttons
Posted: Thu Apr 30, 2009 11:38 pm
by JellyFish
arborint wrote:Then you need to use one of the form button elements. Probably image button if you want a consistent look. But honestly, why don't you want to use Javascript? It is there in every browser just waiting to do things like this.
The reason I don't want to do this with javascript is because I just want to have to write the HTML and have it work. CSS will take care of the styling, so all I need to do is worry about writing the right markup. Unless there's a way to automatically make all buttons submit-able with javascript, I'll probably consider it. The thing is though, I'll have to put it in base.js or something (my js file that gets included in every page) but then would it effect pages that don't have buttons? Also what about dynamically inserting buttons, then I'll have to worry about establish an event handler, rather then just appending the HTML and then I'm done.
If you know of some ways to solve some of this issues, then I'll be please to use JavaScript.
Re: Best buttons
Posted: Fri May 01, 2009 1:12 am
by Christopher
Certainly with something like jQuery (or write your own) you could have every element of a certain class be submittable. So if you added that to the Javascript on every page it should just work. The even handler would just submit the form that contained the button, so it could be generic.
Re: Best buttons
Posted: Sat Oct 17, 2009 3:53 am
by JellyFish
I've decided to convert all input buttons into an anchor element and attach event handlers that submit the form when they are clicked, all with jQuery. The only issue I'm having, is an unexpected "not-working-ness" from jQuery:
Code: Select all
$(function() {
$("input.button").each(function(i) {
var anchorButton = $("<a href='#' class='"+this.className+"'>"+this.value+"</a>")
.click(function(evt) {
$(this).parent("form").submit();
return false;
});
$(this).after(anchorButton);
anchorButton.append(this);
});
});
For some reason, calling submit() does NOT submit the form.

There must be something I'm doing wrong, right?
Edit: Here's the html:
Code: Select all
<form action="" method="get">
<div class="field">
<label for="text" class="placeholder">Text</label>
<input type="text" class="text" id="text"/>
</div>
<div class="field">
<label for="password" class="placeholder">Password</label>
<input type="password" class="password" id="password"/><br/>
</div>
<div class="field">
<label for="textarea" class="placeholder">Textarea</label>
<textarea id="textarea"></textarea>
</div>
<input type="submit" class="button pill-left" name="submit" value="Submit"/>
<input type="submit" class="button pill-right" name="cancel" value="Cancel"/>
</form>
Re: Best buttons
Posted: Sat Oct 17, 2009 7:37 am
by kaszu
I'm not 100% sure, but problem could be binding to element event if element is not in DOM.
Try if this works:
Code: Select all
$(function() {
$("input.button").each(function(i) {
var anchorButton = $("<a href='#' class='"+this.className+"'>"+this.value+"</a>");
$(this).after(anchorButton);
//Uncomment following line if it still doesn't work.
//var anchorButton = $(this).next();
anchorButton.click(function(evt) {
$(this).parents("form").submit(); //Changed from parent() to parents() in case your html changes in future
return false;
});
anchorButton.append(this);
});
});
Re: Best buttons
Posted: Sat Oct 17, 2009 12:45 pm
by JellyFish
I tried both of your solutions and, unfortunately, no luck. Also, why do I need to change the parent method to parents method, doesn't a submit button just submit one form?
...*Left to go test something*...
It turns out that a submit button submits the top most form parent. So, once I figure out how to actually initiate a form submission through javascript, I'll then be able to make sure my new button acts the very same as the original input button.
But as you can see there's some odd problem with the submit() method. Even when I select the form element directly and call submit() nothing happens. Is it jQuery? What gives?
Edit: It appears that whenever there is an input element with the name set to "submit" the form doesn't submit. I changed the html to:
Code: Select all
<form id="foo" onsubmit="alert('YES!!!'); return false;">
<div class="field">
<label for="text" class="placeholder">Text</label>
<input type="text" class="text" id="text" name="text"/>
</div>
<div class="field">
<label for="password" class="placeholder">Password</label>
<input type="password" class="password" id="password" name="password"/><br/>
</div>
<div class="field">
<label for="textarea" class="placeholder">Textarea</label>
<textarea id="textarea" name="textarea"></textarea>
</div>
<input type="submit" class="button pill-left" name="foo" value="Submit"/>
<input type="submit" class="button pill-right" name="cancel" value="Cancel"/>
</form>
Notice the name of the first submit button has changed. The new anchor buttons now submit the form, but bypasses onsubmit event set in the form element's attribute.
So now I have two questions. Why can't I have any input elements with the name "submit"? And why is the submit() jQuery method not calling that event handler from the form element's attribute?
Edit again: It appears that the submit() method doesn't call the event handlers from attributes, but rather only from javascript. So if I change my javascript to:
Code: Select all
$(function() {
$("form").submit(function(eventObject) {
alert("YES!!!");
return false;
});
//... the rest of the code
the function binded to the submit event via javascript is called. The fact that I can't create events within html attributes is another bummer. There are two bummers: first, there can't be an input with the name "submit", and second there event handlers created through onsomething attributes in html aren't called.
How can I eradicate these bummers?