Create Metro Style Tiles With Pure HTML/CSS – metroStyles.css

Preview:

Description:

metroStyles.css is a small CSS library to create a Windows 10 Metro-style tiled menu with plain HTML and CSS.

How to use it:

Import the necessary stylesheet ‘metroStyles.css’ into your html document.

<link rel="stylesheet" href="assets/metroStyles.css">

The HTML structure for the tiled menu.

<div class="container">
  <div class="grid">
    <a href="#" class="btn1"><img src="assets/icons/contact.svg" alt="mail"></a>
    <a href="#" class="btn2"><img src="assets/icons/gallery.svg" alt="gallery"></a>
    <a href="#" class="btn3"><img src="assets/icons/calendar.svg" alt="calender"></a>
    <a href="#" class="btn4"><img src="assets/icons/list.svg" alt="list"></a>
    <a href="#" class="btn5"><img src="assets/icons/multiple-users-silhouette.svg" alt="contacts"></a>
    <a href="#" class="btn6"><img src="assets/icons/play-button.svg" alt="play"></a>
    <a href="#" class="btn7"><img src="assets/icons/picture-gallery.svg" alt="gallery"></a>
    <a href="#" class="btn8"><img src="assets/icons/video-player.svg" alt="videoplay"></a>
    <a href="#" class="btn9"><img src="assets/icons/users.svg" alt="users"></a>
    <a href="#" class="btn10"><img src="assets/icons/settings.svg" alt="settings"></a>
    <a href="#" class="btn11"><img src="assets/icons/twitter.svg" alt="twitter"></a>
    <a href="#" class="btn12"><img src="assets/icons/vimeo.svg" alt="viemo"></a>
    <a href="#" class="btn13"><img src="assets/icons/youtube.svg" alt="youtube"></a>
    <a href="#" class="btn14"><img src="assets/icons/facebook.svg" alt="facebook"></a>
    <a href="#" class="btn15"><img src="assets/icons/instagram.svg" alt="instagram"></a>
    <a href="#" class="btn16"><img src="assets/icons/linkedin.svg" alt="linkedin"></a>
  </div>
</div>