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.
This is a question to the design-minded folk here: (who can explain possibly with science)<p>1. Why would MS chose to use non-rounded buttons?<p>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)<p>[1]- <a href="http://www.uiandus.com/blog/2009/7/26/realizations-of-rounded-rectangles.html" rel="nofollow">http://www.uiandus.com/blog/2009/7/26/realizations-of-rounde...</a>
The lack of clear affordances in the Microsoft design really bothers me.<p>* When two buttons are next to each other, do they behave as tabs, toggles or buttons with disparate behaviors? You can't tell.<p>* is an icon next to a field actionable? I have no idea until I try to click it.<p>* 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?)
Good... nice ... but they don't look like buttons.<p>I tested with my mother, with my grandma, and my girlfriend. The buttons doesn't work.<p>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.<p>Other than that, I find the website, including the buttons, quite clean.
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.<p>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.<p>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.<p><a href="http://jquit.com/builder/" rel="nofollow">http://jquit.com/builder/</a>
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. :)<p>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.
Would be nice if this page - <a href="http://ace-subido.github.com/css3-microsoft-metro-buttons/buttons.html" rel="nofollow">http://ace-subido.github.com/css3-microsoft-metro-buttons/bu...</a> was included in the zip as an html page.
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.