Extreme CSS, Learn Twitter Bootstrap 3, PHP Code Snippets, Demos, LESS, SASS and HTML5

Currently the Metro Style is in Trends, After the Launch a Metro UI in Windows it Became Trends on Internet to use Metro Style and Flat Design. So by this i have thought lets make a Metro Style Button Using Css

CSS Code:

.btn-metro {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: #08C;

  /* Font styles */
  color: white;
  font-weight: bold;
  text-decoration: none;
}

.btn-metro:hover { background: #0AF; color:white important; text-decoration:none }

.btn-metro.three-d {
  position: relative;
  box-shadow: 
    1px 1px #53A7EA,
    2px 2px #53A7EA,
    3px 3px #53A7EA;
  transition: all 0.1s ease-in;
}

.btn-metro.three-d:active { 
  box-shadow: none;
  top: 3px;
  left: 3px;
}

Output :


Output Image (if your Brower is Old):