

CSS3 Microsoft Modern Buttons - acesubido
http://ace-subido.github.com/css3-microsoft-metro-buttons/index.html

======
highace
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.

~~~
acesubido
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!

~~~
navs
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?

~~~
acesubido
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...](http://gizmodo.com/5933580/on-second-
thought-microsoft-is-calling-metro-modern-ui-style-now)), really got their own
ecosystem off balance.

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

------
mbesto
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...](http://www.uiandus.com/blog/2009/7/26/realizations-of-rounded-
rectangles.html)

~~~
joshka
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.

~~~
hnriot
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.

------
feverishaaron
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?)

~~~
IanDrake
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.

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

------
cientifico
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.

------
ThomasQue
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.

~~~
acesubido
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.

~~~
ThomasQue
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 ;)

------
duqee
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?

------
joshka
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.

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

<http://jquit.com/builder/>

------
bratsche
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.

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

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

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

~~~
acesubido
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!

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

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

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

~~~
acesubido
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 :)

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

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

~~~
acesubido
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.

------
devniel
Nice work, i like the metro style.

------
ridgehkt
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.

~~~
acesubido
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.

