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

Author: ArslanAmeer
Views Total: 4,349 views
Official Page: Go to website
Last Update: March 30, 2018
License: MIT


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


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>

See also  Animated 3D Buttons In Pure CSS - pushy-buttons

Leave a Reply

Your email address will not be published. Required fields are marked *