CSS: Metro Tiles for Bootstrap (from https://github.com/TalksLab/metro-bootstrap)

bootstrap-metro-tile.css

/*
 * metro-bootstrap files
 */
.tile {
  display: block;
  cursor: pointer;
  -webkit-perspective: 0;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.2s;
  float: left;
  min-width: 75px;
  min-height: 75px;
  text-align: center;
  opacity: 0.75;
  background-color: #2e8bcc;
  z-index: 1;
  border: 4px #ffffff solid;
  color: #ffffff;
}
.tile h1,
.tile h2,
.tile h3,
.tile h4,
.tile h5,
.tile h6 {
  color: #ffffff;
  -webkit-user-select: none;
}
.tile h2 {
  margin-top: -20px;
  margin-left: 0px;
}
.tile h3,
.tile h4 {
  margin-top: -15px;
}
.tile h1.tile-text,
.tile h2.tile-text,
.tile h3.tile-text,
.tile h4.tile-text {
  margin-top: 20px;
}
.tile h1 {
  font-size: 36px;
}
.tile h2 {
  font-size: 30px;
}
.tile h3 {
  font-size: 24px;
}
.tile h4 {
  font-size: 18px;
}
.tile a:hover {
  text-decoration: none;
}
.tile img {
  border: 0;
}
.tile:hover {
  opacity: 1;
}
.tile .tile-label {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 14px;
  color: #ffffff;
}
.tile .tile-content .tile-icon-large {
  margin-left: 0px;
  vertical-align: middle !important;
  text-align: center;
}
.tile .tile-content {
  padding-top: 20px;
  line-height: normal;
  position: relative;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tile.tile-blue {
  background-color: #2e8bcc;
}
.tile.tile-green {
  background-color: #339933;
}
.tile.tile-red {
  background-color: #e51400;
}
.tile.tile-yellow {
  background-color: #ffc40d;
}
.tile.tile-orange {
  background-color: #f39c12;
}
.tile.tile-pink {
  background-color: #e671b8;
}
.tile.tile-purple {
  background-color: #7b4f9d;
}
.tile.tile-lime {
  background-color: #8cbf26;
}
.tile.tile-magenta {
  background-color: #ff0097;
}
.tile.tile-teal {
  background-color: #00aba9;
}
.tile.tile-turquoise {
  background-color: #1abc9c;
}
.tile.tile-green-sea {
  background-color: #16a085;
}
.tile.tile-emerald {
  background-color: #2ecc71;
}
.tile.tile-nephritis {
  background-color: #27ae60;
}
.tile.tile-peter-river {
  background-color: #3498db;
}
.tile.tile-belize-hole {
  background-color: #2980b9;
}
.tile.tile-amethyst {
  background-color: #9b59b6;
}
.tile.tile-wisteria {
  background-color: #8e44ad;
}
.tile.tile-wet-asphalt {
  background-color: #34495e;
}
.tile.tile-midnight-blue {
  background-color: #2c3e50;
}
.tile.tile-sun-flower {
  background-color: #f1c40f;
}
.tile.tile-carrot {
  background-color: #e67e22;
}
.tile.tile-pumpkin {
  background-color: #d35400;
}
.tile.tile-alizarin {
  background-color: #e74c3c;
}
.tile.tile-pomegranate {
  background-color: #c0392b;
}
.tile.tile-clouds {
  background-color: #ecf0f1;
  color: #34495e;
}
.tile.tile-clouds h1,
.tile.tile-clouds h2,
.tile.tile-clouds h3,
.tile.tile-clouds h4,
.tile.tile-clouds h5,
.tile.tile-clouds h6 {
  color: #34495e;
}
.tile.tile-clouds .tile-label {
  color: #34495e;
}
.tile.tile-silver {
  background-color: #bdc3c7;
}
.tile.tile-concrete {
  background-color: #95a5a6;
}
.tile.tile-asbestos {
  background-color: #7f8c8d;
}
.tile.tile-info {
  background-color: #3498db;
}
.tile.tile-danger {
  background-color: #e74c3c;
}
.tile.tile-warning {
  background-color: #f1c40f;
}
.tile.tile-success {
  background-color: #2ecc71;
}
a.fa-links {
  color: #ffffff;
}
a.fa-links:hover,
a.fa-links:focus {
  color: #ffffff;
}
.tile.tile-small {
  height: 70px;
  width: 70px;
}
.tile.tile-medium {
  height: 150px;
  width: 150px;
}
.tile.tile-wide,
.tile.tile-double {
  height: 150px;
  width: 310px;
}
.tile.tile-large {
  height: 310px;
  width: 310px;
}