my CSS3 library for making Microsoft-metro themed buttons

  • By Ace Subido
  • Last update: Nov 28, 2022
  • Comments: 9


Repo no longer maintained

I made this library around 7 years ago, and there weren't a lot of options back then. It's 2019, and there's a lot of other options out there, but most importantly an official Microsoft Fluent design CSS library made by Microsoft. I highly recommend that you use that instead:


Formerly known as CSS3 Microsoft-Metro Buttons (CMMB)

Inspired by Microsoft's Modern Design Language, I was in need of a metro-styled CSS3 button library. I wanted to make similar metro-looking buttons used by Microsoft (extensively used in their Microsoft Windows Azure website) So I've built a very small, simple and clean CSS3 library to deal with my problem.

Thus CSS3 Microsoft-Modern Buttons was born. Weighing in at a healthy 33KB (compressed, 5.5KB gzipped), it's a light-weight and easy-to-use CSS/JS library that uses CSS3 styles for button design. The library can also work with Twitter Bootstrap. The buttons are also cross-browser compatibile from IE8, to the latest version of Chrome, and Firefox so you don't have to spend countless minutes testing on different browsers.

My goal is to help developers out there shave off some wasted time building that metro-like stylesheet by providing them a library, a starter kit, a base on which they can build upon.

Demo and Documentation has a live demo and the library documentation.



LESS makes us write CSS much more like functional programming and it trains us to solve problems that way. I use wearekiss's SIMPLESS. To know more about LESS visit To access the LESS and SASSfiles, download the "dsl-branch" branch.

Though as of 1.1.0, I haven't found the time to do it with LESS or SASS.

Got a bug to report or a feature request? is the perfect place for that.


My name is Ace Subido, I'm a .NET developer from the Philippines.


Inspired by Tim O'Donnell's CSS3 Google Buttons, Twitter Bootstrap, and Microsoft. Icons from and Syncfusion's Metro Studio. I do not claim ownership on the origin of design and icons.


Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License. (I love this license! The license summary doesn't have any paragraphs in all-caps that seems like the license is angry at you)



  • 1

    Missing icon classes

    You're missing some of the new bootstrap icons, which start at 144px y position (.icon-hdd -> .icon-fullscreen).

    Thanks for this project by the way, perfect timing for a project which is using the new Microsoft style.

  • 2

    #1 Implement sass version on sass branch


    This pull request contains the following changes:

    • sass directory which includes the converted css -> sass file
    • overwrites cmmb.css
    • added .sass-cache to gitignore as this gets generated by sass for faster recompilation of templates and partials


    • assuming that this will land in sass/less-branch and not master
    • perhaps the branch could be called something else other than "less-branch" -> "dsl-branch" ? DSL being domain-specific language.


    clone the repository and cd into it

    sass --watch sass:css --style=compressed
  • 3

    css3 microsoft metro buttons added to twitstrap resources

    Hello, We have just add css3 microsoft metro buttons to twittstrap resources list Under : Base CSS Regards

  • 4

    Dropdown click target

    Nice work!

    Just an idea: I think that when clicking the dropdown button, it should not only be the small pulldown arrow that triggers the dropdown menu to appear, rather the entire button surface should trigger it. I think that's somewhat of a design consensus?

  • 5

    Documentation needs a quick fix...

    Under the description of files (2. Contents):

    The sixth one down s/b changed from: m-buttons.css / m-buttons.min.css to m-icons.css / m-icons.min.css since these files are already mentioned above.

    Otherwise an extraordinary effort. I am a total noob trying to build my first landing pad/countdown page and I really appreciate the extraordinary attention to good instructions and of course the package overall. Well done!


  • 6

    Buttons not barrier-free

    Hi there,

    first of all great buttons you made here, thank you!

    I'm using the buttons (without javascript) via a-class for a sharepoint 2010 application i developed at a university in germany, and (besides some css-issues with sharepoint when using the minified css-version m-styles) they're working pretty fine. Just one thing I noticed and changed in my implementation:

    For our environment, there's a need to have barrier-free "buttons" to work with, so if someone has problems with his/her eyes and can't distinguish the buttons only from their color, I added a slight padding-change to 13px 16px to active buttons. Just wanted to tell you about it, perhaps you could add a css-class or to make them barrier-free if you want.

    Best regards, Dominik

    Here's an example of what I mean, please don't worry about the language. Its groargh! (german) ;)


  • 7

    dropdown example work correct only with bootstrap.min.css

    just git clone and try run dropdown example.

    When try each click on "Setting" In firebug console show error message: "elem = document.getElementById( match[2] );"

    No any icons like "Edit Profile", "Logout" shown

    jquery-1.8.2 and 1.8.0 also

  • 8

    little mistake on documentation


    In the documentation page :, in the example to create large icon buttons using the big swap arrows, the code that you show contains a little mistake, it's not

    <a href="#" class="m-btn bigicn-only green"><i class="m-icon-big-swapright icon-white"></i></a>

    but :

    <a href="#" class="m-btn bigicn-only green"><i class="m-icon-big-swapright m-icon-white"></i></a>

    Missing the 'm-' !

    and, thank for your work!

  • 9

    Add more color :)

    Hi, the buttons is very useful! Thank a lot!

    I think you can add more color in new version, like orange, yellow , brown ...etc

    Now all of 5 colors are already very pretty, I hope you can make more color :)))