CSS3 Microsoft Modern Buttons | Hacker News Reader

CSS3 Microsoft Modern Buttons

ace-subido.github.com

118 pointsacesubido54 comments

Great job on the implementation, examples, and documentation, but personally I don't like these kind of buttons. They don't look like buttons. Take the text away that usually specifies an action (like 'download', 'submit', 'buy now') and all you have is a rectangular coloured box.

I really do appreciate the critique and the compliment.

A few months ago I've been really searching high and low for a simple library to recreate those buttons Microsoft uses on their websites. I do agree, it really doesn't look like buttons when you take away the text. Well anyway, I decided to build one for my own. Just shared this v1.1 release to everyone here at hn. Just maybe, just maybe, someone out there also needs a simple button/form library for such a specific need.

The release kind of addresses some issues, because some people keep contacting me at twitter or fb asking me "how-to's", so hopefully most of their 'needs' are met :) Really tried to make the documentation a little eye friendly for everyone.

Thanks again man!

Oh of course, I don't mean that as a dig towards you - it's great that you found something that was needed and implemented it yourself, which you've done very well. I guess it's more towards Microsoft for taking a concept that is relatively well ingrained by now (I'm referring to buttons with bevels, gradients, and shadows), and turning it on it's head in a seemingly backwards way.

I for one am a fan of the Metro look. Whether I'd ever use it on a client's site, that I can't say but for my own creations I simply adore the look. Awesome work!

Can you maybe point me towards any other metro UI libraries you may have found?

For WPF (.NET) applications, I've personally used MahAppsMetro (http://mahapps.com/MahApps.Metro/).

For web, I've seen code52's metroCSS (https://github.com/Code52/metro.css/) and olton's Metro UI CSS (http://metroui.org.ua/)

Both are full-blown frameworks with grids and everything and I've tried them out for my needs, but most libraries are too over the top. I needed something more stripped down for buttons that can work with Bootstrap or with my own handmade disaster.

On a sidenote, the day Microsoft adviced and pushed developers to stop calling it "Metro" and call it "Modern UI" instead (http://gizmodo.com/5933580/on-second-thought-microsoft-is-ca...), really got their own ecosystem off balance.

Thanks. I find these full blown templates invaluable in prototyping.

They do look like buttons when incorporated into a Metro-style design. The contrast with their surroundings, and the text, makes it clear.

Metro isn't about skeuomorphic design, you see.

But affordances (such as bevelled buttons) are not the same as skeuomorphic design. Bevelling an area of the screen implies that something is pressable and hence aids the user. Covering iCal in a fake leather bitmap does not help the user. WP7/Metro seems to have taken a lot of tried and tested affordances away, but hasn't really replaced them with anything.

Bevelled buttons make a flat object appear to be three dimensional. It predates what we think of skeuomorphism today, but it's just a predecessor.

You're right of course, but if you take that to the extreme, styling a clickable action with a coloured square is skeumorphism too (it's still a button). The way I see it, the concept of a button has long since tracended into a metaphor in the visual language of UI. Where it used to mimic the physical world, it has since been reduced to a symbol. I think that most people would say that the beveling effect is part of this symbol. If that is the case, then Metro tries to redefine an established symbol. This isn't unique per se - languages evolve all the time, but it does explain why a lot of people might be confused of it.

This isn't about skeuomorphic design or lack thereof. Take a look at the examples page, at things like button groups or button strips. They're grey rectangles, and the only way to tell that they're clickable buttons is if you mouse-over them. This is a problem on a touch device because there's no way to trigger that state.

In fact, each example group has a grey rectangle in the top-left corner that says "Example" and the distinguishing feature is that it uses a bolder font in a lighter shade of grey. But otherwise a user might think it's also a button. So I guess when you say it's got to be incorporated into a Metro-style design, you just really can't have any other colored rectangles on the page anywhere lest they be confused with input right?

I'm not saying this to be critical of the author. I think he/she did a fantastic job, and the buttons look really well done for Metro style.

> This isn't about skeuomorphic design or lack thereof

"They don't look like buttons" is a complaint about lack of skeumorphism. An extremely common and accepted case, but a case nonetheless.

Metro-like buttons do not look like 'real' buttons and, embedded in non-Metro content, don't look clickable. In a properly designed Metro UI they are unmistakably clickable and work fine in touch devices. Metro is still relatively new and takes some getting used to in the wild. But hey, there was a time when people complained about the lack of underlining in the text of button-looking clickable elements in web pages.

You are right also, in Metro a colored rectangle with a symbol and/or a short word is meant to be clickable. Non-clickable elements should look clearly different in content or in styling. That is fine.

Note: I'm not trying to defend Metro as 'better' or 'worse', only emphasize the fact that it's different.

I'd argue it's not so much about skeuomorphism as much as it is about affordance. They don't look like you can push them and interact with them, which means you need to be much more careful about the context and design language you use them in.

But that design language and how it is used to create context is what the Metro ("Modern"?) guidelines provide. There's a lot of stuff here for example: http://msdn.microsoft.com/en-US/library/windows/apps/hh46542...

They do look clickable when in context. Verbs such has "Delete" signal to me, regardless of how much gradient or border-radius an element has, that it is in fact a button. As do actionable icons like a trash can.

> Take the text away that usually specifies an action (like 'download', 'submit', 'buy now') and all you have is a rectangular coloured box.

I guess that is the part of the point, to have actionable text which describes what happens if you press the button.

They look like clickable buttons to me when used here:

https://www.windowsazure.com

This is a question to the design-minded folk here: (who can explain possibly with science)

1. Why would MS chose to use non-rounded buttons?

My understanding is that rounded corners draw attention to content in the middle because they require less cognitive strain.[1] As far as I know, the only reason these buttons are/can be successful is if there is marginally more space between the edges and the content. (thus instead of rounded corners drawing the attention inwards, the large blank space is)

[1]- http://www.uiandus.com/blog/2009/7/26/realizations-of-rounde...

Shane Morris @shanemo (ex 'softie designer UX guy) gave a recent talk on Being Authentically Digital with Win 8. He stated the same thing. Also that the human brain is wired to recognise T shapes making the Windows 8 start menu layout a problem.

My guess, they didn't want it to look like an iOS screen.

I agree with your conclusion, that not looking like iOS is in itself a design goal, and one that makes sense. Just as with anything else in design, a lot of people are tired of looking at iOS rounded everything.

There's no philosophy behind Microsoft doing this. They simply did it because they want their Metro design to catch on, regardless if that makes for a better web or not.

This is my understanding too. And I think the Metro look is going to perform particularly poorly when it is isolated to navigational components on a webpage while content follows whatever other visual form.

IMHO the real MS interface isn't very desktop/mouse friendly and the reason it works is because all of those square buttons are the only thing you can activate in the metro screens. If I put one rounded button in the metro interface I'll bet it would get clicked far more often than the other interface elements. It wonder if they tested it vs a more humanistic version?

Interesting, would try to branch out some components with this thought :)

Well, sometimes there are design reasons to use something that seems counter-intuitive. I can't say why Microsoft would choose to do this but there are possibly several reasons. You can't always go by what the science says because if we did then all designs would be roughly the same; whatever science says each element should look like. If we followed the suggestions from your linked article then all of our elements, especially buttons, would be circles.

Sometimes, for the sake of the design, you would choose harsh corners so that it makes them stand out all the more. Especially since so many use rounded corners for their designs these days. When everyone else has rounded corners your squared corners stand out. They may be bothersome to the eye but they attract the attention.

Maybe having rounded cornered buttons conflicts with the rest of the design which ruins the pleasing effect of the entire design? Possibly they felt breaking the "rules" for the buttons prevents a collapse of the design as a whole. Say, for instance, the majority of the design is squared corners but those rounded cornered buttons stand out so much that the eye is constantly draw to them instead of the content to be read?

Maybe they just don't like rounded buttons?

As someone else commented, maybe they don't want their buttons to be too similar to buttons from another design? It does seem you can be sued for minor design choices these days.

What you are quoting is true when buttons are occupying mostly white space.

When the buttons are tightly packed, as live tiles are in Windows 8, the rounded corners clash with eachother and the negative space distracts away from the content within the tile.

Source: I'm designing a Windows 8 phone launch app.

I doubt that the lack of rounded corners is going to give anyone issues with the Metro/Modern/whatever style. The list of things with entirely rectangular buttons includes Windows prior to XP, most other older non-Mac window managers and OSes, and a vast number of real-world products like stereos and TVs. The very top thing on that link is an update basically saying it's an unresolved question: "My rounded rectangles cognitive argument is getting a good thrashing — which is a good thing. I'm as keen as anyone to find out if the theory holds water, and if you can direct me to better research, I'd love to read it. Please share!" I don't buy it, personally. Maybe the reason signs in public places have rounded corners, like the famous No Parking sign Jobs showed, is just to avoid having sharp corners for safety? Then there's stuff like the utterly-minimal rounding of Lion/Mountain Lion buttons: they'd fall pretty high on that cognitive cost scale he posits, especially compared to the Aqua ones they replaced.

The lack of hinting that one element is clickable/tappable while another is a bigger issue, though, than just rounded edges. As far as web use of this style goes, I think the arrows-in-circles (or something similar) used on the main button on this page, and on the Windows Azure site mentioned elsewhere in the comments here will be key.

WP7 is pretty good about having "buttons" be styled fairly distinctively from other elements (they're circular in the menu bar at the bottom of an app, and in other places like the "More Details" button when editing a calendar appointment they get a thick distinctive border.

When your style is minimal you need to be very careful and consistent with the meaning of what visual cues you do have, so how stuff like that will translate to the web—especially if someone just wants to make a site look "Metro" but isn't so familiar with the conventions)—is an open question.

Maybe so they don't have to spend time getting it working in IE6-8?

The lack of clear affordances in the Microsoft design really bothers me.

* When two buttons are next to each other, do they behave as tabs, toggles or buttons with disparate behaviors? You can't tell.

* is an icon next to a field actionable? I have no idea until I try to click it.

* These buttons are very reliant on :hover to indicate behavior. That's not very useful for users on touch devices (Is the button intentionally disabled, or is it broken?)

I agree. While I really like the aesthetic behind Metro's minimalism, I'm not convinced the usability is there.

Having a windows phone for a while now, I can tell you this sort of thing was really unnerving at first. All I can say is that you get used to it.

Questions like: "is that a label or button?" were frequent in my mind because many "buttons" that are just text, with nothing to suggest they're clickable.

However, once you mind is free of the notion that a button must have a border around it or be underlined, you start to admire the simplicity.

I thought this was a joke at first, poking fun at the rediculous minimalistic design - solid square button. But there is actually some content.

Good... nice ... but they don't look like buttons.

I tested with my mother, with my grandma, and my girlfriend. The buttons doesn't work.

But the site is nice.

Please, make the link to the examples more visible. If it hasn't been on HN, I wouldn't have taken the time to look for them (never saw the topbar) : I clearly don't want to download them if I cannot see them first. Also the gigantic banner on the frontpage is useless to me, I didn't read it, at all.

Other than that, I find the website, including the buttons, quite clean.

noted, trying to get more feedback on that jumbo banner. i'll see if maybe a link to "getting started" on the bottom could lessen people getting "lost" as well.

The way I see it : no banner, a huge "CSS3 Microsoft Modern Buttons", some examples, then a huge "See more" button (like your "Download ...") and a less visible "Download" button (or maybe at the top of each page, something like the GitHub's "Fork me"). All before the fold. Just my 2 cents though ;)

I think these look great! good job, I don't think you will have many people not knowing a button is a button, if you added a 2px raduis on them you would look the same as gmail buttons and don't tell me people don't know they are buttons too?

Nice work, I would definitely use this in a project that needed metro^H^H^H^Hodern buttons.

Like ThomasQue, I think you need to put some button examples on the home page. I wasn't entirely sure what a metro button was going to look like.

The aliasing of the icons looks a little off (I'm viewing on a retina MBP, so it stands out against the crisp text). Zoom in and you'll see what I mean. The edges are not crisp in the right places. The circles don't look perfectly rounded. The plus has unnecessary aliased verticals, etc. Perhaps start with a higher quality vector and scale down, taking care to align the sides with a pixel border.

Note that there's also jQUIT, which has Windows-8-like themes for jQuery UI components.

http://jquit.com/builder/

I really like what you've done. I also like that you built it on top of Foundation, which I've just recently discovered and love. :)

One thing I'd like to see is the focus style. Searching through your code it looks like you do have support for it, so I guess it's just a request for something to add to the demo page.

I see mention of Bootstrap but not Foundation.. am I missing something?

Oh shit, you're right. I'm an idiot. I was obviously just reading what I wanted to read ;)

Would be nice if this page - http://ace-subido.github.com/css3-microsoft-metro-buttons/bu... was included in the zip as an html page.

Noted :) along with everyone's comments. Compiling all the stuff people might need and all your comments, would make an update in the following days if I have time.

You're right, maybe a single HTML template alongside the download would be great.

Thanks again!

I like it it. More compontents would be great, but there is always hope that those will come in the future :)

Hopefully, if the demand for more components rises :) thanks again for the compliment.

I've been looking for a metro-style framework for months. I have fallen head over heels for the flat look of MS's new style, particularly something like outlook.com

More components would be awesome!

Very nice work. I appreciate the section about integrating with Bootstrap, I may use these in my next website.

If you'll be using bootstrap, just a heads up: I found out from a ticket someone issued in Github that Bootstrap released new icons on 2.1.1. Going to try and incorporate that in the next push :)

One issue I noticed.. In Chrome if you zoom the browser to 125%, the 'arrow in a circle' icons look funny.

Can I just drop this into a bootstrap project or do I need to rename all my button classes?

yep, you can just drop it into a bootstrap project. if you want a button to use the style just add "m-" to the usual bootstrap "btn" class.

Nice work, i like the metro style.

All you did was take Bootstrap's built-in buttons and remove the gradients and rounded corners. That's not a modern design, it's just plain and boring.

If you read the readme and the source. You would find that much of it was from Tim O Donnell's Google buttons. As my process 3 months ago I gave them a new CSS base, repainted and attached thin bevels. As for the colors I matched the colors and gradients from Microsoft's websites. I barely touched bootstrap for the buttons except for the dropdown, the radio button javascript are hand-made. The form elements and icons however are a different story, they came from Bootstrap and Syncfusion.

All sources are transparently mentioned in the acknowledgements section of the readme.

Reply on news.ycombinator.com