This link has been bookmarked by 159 people . It was first bookmarked on 16 May 2007, by Rented User.
-
10 Nov 09
-
<button type="submit"
-
problems with WindowsCE/PocketPC - it’s not just those devices, but all mobile browsers that conform to the XHTML-MP (mobile profile) standard because (presumably) it’s based on XHTML-Basic, which doesn’t include the button element. I tested this on a couple phones I have and sure enough, the button elements aren’t even displayed.
Great article, but beware if you want to create forms that can be used on a modern mobile phone without munging.
-
-
09 Nov 09
-
12 Oct 09
J Mullertop of page has an example of a browser specific css for rounded corners/curves.
Also an intro to using a buttons plugin in the blueprint framework.
#features h3 a{
height: 66px;
font-size: 210%;
padding: 11px 15px 3px 105px;
-webkit-border-top-left-radius:30px;
-webkit-border-bottom-right-radius:30px;
-moz-border-radius-topleft:30px;
-moz-border-radius-bottomright:30px;
}css rounded corners firefox buttons blueprint framework tutorial
-
29 Sep 09
-
25 Sep 09
-
19 Sep 09
-
11 Sep 09
-
05 Sep 09
-
07 Jul 09
-
24 Jun 09
-
Hi, I just wanted to share a little bit of code with you. I’ve seen how bad implemented is the ‘button’ element in IE6 (don’t know about IE7), making it virtually unusable. I’ve made the following javascript code in order to restore some of its functionality the way Firefox/Safari does. What this does is dinamically running through all the ‘button’ elements in the page and assigning to each one of them a className + ‘_over’ class to the button for the ‘onmouseover’ event, and making it pass the correct ‘value’ to the action form.
function fixButtons() {
if(document.all && document.getElementById) {
myButtons = document.getElementsByTagName(‘button’);
for(i = 0; iI’m placing it at the footer of my pages, just before closing the ‘body’ tag. For the CSS part you would have to do something like the following:
button.myClass:hover, button.myClass_over {
background-color: #333;
}hope it helps!
-
-
06 Apr 09
-
23 Mar 09
-
17 Mar 09
-
03 Mar 09
-
20 Feb 09
-
13 Feb 09
-
06 Feb 09
-
26 Jan 09
-
08 Jan 09
-
30 Dec 08
-
26 Dec 08
-
They had to look like buttons.
They had to look the same across browsers.
The styles I used for
buttonneeded to also be used with ones I might use with links (since interaction in Wufoo is always initiated with either a Form Submission or an Ajax Call from a link, these things probably sit next to each other and I needed them to have the same visual weight).The markup needed to be flexible and easy to change for uses in lots of different situations.
I should be able to use icons and colors effectively to pass information about the kind of interaction that would be taking place.
The Requirements
With those challenges in place, I dove into the CSS and after solving some cross browser challenges, came up with the following (which you can also see all over Wufoo):
The Results
Nothing crazy. Simple, but effective. Now, what I love about this way of handling buttons is that I can use the 1000 icon arsenal from FAMFAMFAM to illustrate a ridiculous number of ideas and actions without having to generate something from Photoshop every single time I need something new. If we take a quick look at the markup, you?ll notice that the last two buttons up there are actually links:
<div class="buttons"> <button type="submit" class="positive"> <img src="/images/icons/tick.png" alt=""/> Save </button> <a href="/password/reset/"> <img src="/images/icons/textfield_key.png" alt=""/> Change Password </a> <a href="#" class="negative"> <img src="/images/icons/cross.png" alt=""/> Cancel </a></div>The reason this is useful is because lots of actions in web applications are REST driven and so simply sending a user via a link to a specific URL will initiate something they need to do. Using styles that can work for both types of elements (links and buttons), gives us the flexibility to keep our means of interaction looking consistent and appropriate whether it?s being done with Ajax or a standard submission.
Just a quick aside, you may wonder why I?ve left the alt tags blank in those icon images. It may come as a surprise to some that while alt attributes are required on every image, actually describing them is not. Empty alt attributes are completely valid and help screenreaders know which information to effectively ignore, saving your users precious time when they?re trying to find the next appropriate actionable item. Because the icons are actually superfluous, I?d rather not waste the user?s time hearing about the image I used to visualize what?s going on. They?ll just hear ?Submit? rather than ?Checkmark Submit?, which would actually make things a little confusing.
The CSS
For the most part, the CSS for styling these buttons are fairly straight forward. The hair-pulling inconsistencies across browsers results in the number of padding discrepancies below, but it?s nothing impossible and lucky for you, already figured out.
/* BUTTONS */.buttons a, .buttons button{ display:block; float:left; margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; /* Links */}.buttons button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */}.buttons button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */}*:first-child+html button[type]{ padding:4px 10px 3px 7px; /* IE7 */}.buttons button img, .buttons a img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px;}One thing that came up while working on this was the fact that there?s a rendering bug in Internet Explorer in regards to showing long buttons. You can read about it at Jehiah.cz, but it?s what?s responsible for some of the width and overflow declarations above.
Adding Some Color
In Wufoo, we made the hover color blue for neutral actions and used green and red appropriately for positive and negative connotations. The following are the styles we?ve created for dealing with buttons that are meant to show positive interactions like adding and saving and negative interactions like canceling and deleting. It?s a nice touch for us and obviously you can pick and choose to your liking.
/* STANDARD */button:hover, .buttons a:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699;}.buttons a:active{ background-color:#6299c5; border:1px solid #6299c5; color:#fff;}/* POSITIVE */button.positive, .buttons a.positive{ color:#529214;}.buttons a.positive:hover, button.positive:hover{ background-color:#E6EFC2; border:1px solid #C6D880; color:#529214;}.buttons a.positive:active{ background-color:#529214; border:1px solid #529214; color:#fff;}/* NEGATIVE */.buttons a.negative, button.negative{ color:#d12f19;}.buttons a.negative:hover, button.negative:hover{ background:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19;}.buttons a.negative:active{ background-color:#d12f19; border:1px solid #d12f19; color:#fff;}
-
-
16 Dec 08
-
14 Nov 08
-
09 Nov 08
-
29 Oct 08
-
26 Oct 08
-
27 Sep 08
-
22 Sep 08
-
18 Sep 08
-
01 Sep 08
-
30 Aug 08
-
21 Aug 08
-
01 Aug 08
-
25 Jul 08
Guy CarberryButton elements can look they way you want them to. As opposed to input elements.
-
23 Jul 08
-
09 Jun 08
-
23 Apr 08
-
04 Apr 08
-
27 Mar 08
-
24 Mar 08
-
21 Mar 08
-
20 Mar 08
-
11 Mar 08
-
27 Feb 08
-
24 Feb 08
-
22 Feb 08
-
21 Feb 08
-
07 Feb 08
-
31 Jan 08
-
25 Jan 08
-
23 Jan 08
-
21 Jan 08
-
13 Jan 08
-
16 Oct 07
-
14 Oct 07
-
27 Sep 07
M JCreating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different a
css buttons webdesign html button form design diigoimportapi
-
24 Sep 07
-
13 Sep 07
-
10 Sep 07
-
28 Aug 07
-
16 Aug 07
-
06 Aug 07
-
19 Jul 07
-
15 Jul 07
-
09 Jul 07
-
20 Jun 07
-
07 Jun 07
-
02 Jun 07
-
28 May 07
Nick CowieUnfortunately, the button element doesn’t work in IE on Windows CE and Pocket PC devices. It will render but you cannot activate it. I ran across this problem creating an accessible web app that was going to be used exclusively by blind users. Many of t
-
27 May 07
-
25 May 07
-
23 May 07
-
22 May 07
-
21 May 07
-
19 May 07
-
18 May 07
-
Johann RichardBuilding consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done.
***** 2007 apps article blog browser browsers button buttons tutorial forms html design webdesign css articles business ajax accessibility for:unic.com
-
17 May 07
-
-
Dan SmithAs yet untested (by me) but looks promising. With CSS targetting the button element, you can also skip the input.submit distinction, and avoid sending xy (imagemap )coordinates to the server on submit. From [WSG Announce].
Save
Change Password
Cancel
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.