Metro UI css untuk desain website

Kumpulan Css UI kit elements untuk desain website dengan konsep Flat modern style
inspired with Microsoft’s windows8 Metro UI experience

Flat Button Page Navigation:

Button ini biasa digunakan untuk navigasi halaman selanjutnya atau sebelumnya, next page atau prev page

HTML Markup :

<a href='url' title='prev page'></a>
<a href='url' title='prev page'></a>

Css Style :

.button-1{background-color: #672576;} .button-2{background-color: #09aeef;border-left-color: rgb(229, 229, 229); border-left-style: solid;border-width: 0px 0px 0px 5px;} .button-3{background-color: #717073;border-left-color: rgb(229, 229, 229); border-left-style: solid;border-width: 0px 0px 0px 5px;} .button-4{background-color: #823494;border-width: 0px 0px 0px 5px;border-top-color: rgb(229, 229, 229);border-top-style: solid;} .button-5{background-color: #35c6ff;border-left-color: rgb(229, 229, 229); border-left-style: solid;border-width: 0px 0px 0px 5px;border-top-color: rgb(229, 229, 229);border-top-style: solid;} .button-6{background-color: #8b8a8e;border-left-color: rgb(229, 229, 229); border-left-style: solid;border-width: 0px 0px 0px 5px;border-top-color: rgb(229, 229, 229);border-top-style: solid;} .navgreen{background: #35aa47;background-repeat: repeat no-repeat;display: inline-block;padding: 10px 14px;}.navgreen:hover{background:#09C426;} .next-icon-white{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjKJOCLRU13qc1R_XfiuY3sfC_z2Mu50G4FmWyvEeNWlL7x_itF2GdDg0Mloq3EChledj9xo4UZ7tH1GxWupwp2aPfGpAjN1U5YKlFoef1YzvjtDIbMp1PVyxrGuzcoe_zTUkIAHNeic/s1600/icons-white.png);background-position: -42px -28px;background-repeat: no-repeat no-repeat;display: inline-block;height: 30px;margin: 6px;vertical-align: top;width: 30px;} .prev-icon-white{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjKJOCLRU13qc1R_XfiuY3sfC_z2Mu50G4FmWyvEeNWlL7x_itF2GdDg0Mloq3EChledj9xo4UZ7tH1GxWupwp2aPfGpAjN1U5YKlFoef1YzvjtDIbMp1PVyxrGuzcoe_zTUkIAHNeic/s1600/icons-white.png);background-position: -6px -27px;background-repeat: no-repeat no-repeat;display: inline-block;height: 30px;margin: 6px;vertical-align: top;width: 30px;}

Flat Button Navigation Metro style

Tidak jauh beda dengan fungsi button pada umumnya, button ini biasa digunakan untuk navigasi Read More

windows8 Metro UI style

CSS Metro Style :

.primary-button{-webkit-background-clip: padding;background-color: #852b99;
background-image: -webkit-linear-gradient(top, rgb(133, 43, 153), rgb(133, 43, 153));
background-repeat: repeat no-repeat;border: 0px;color: white;display: inline-block;font-size: 18px;line-height: 38px;margin: 8px 0px 0px 15px;min-width: 42px;outline: 0px;overflow: visible;padding: 8px 15px;position: relative;}
.button-name{letter-spacing: -0.01em;line-height: 1.46em;}
.primary-button-icon{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjKJOCLRU13qc1R_XfiuY3sfC_z2Mu50G4FmWyvEeNWlL7x_itF2GdDg0Mloq3EChledj9xo4UZ7tH1GxWupwp2aPfGpAjN1U5YKlFoef1YzvjtDIbMp1PVyxrGuzcoe_zTUkIAHNeic/s1600/icons-white.png);
background-position: -42px -28px;background-repeat: no-repeat no-repeat;display: inline-block;height: 30px;line-height: 14px;margin: 6px;vertical-align: top;width: 30px;}
.primary-button:hover{background:#6d1b81;}

HTML Snippet :

<a class="primary-button" href="#">windows8 Metro UI experience</a>

Metro Style Social Media

Css Social media flat metro style

.trickstoo-metro{width:300px} .trickstoo-metro li{position:relative;cursor:pointer;padding:0;list-style:none} .trickstoo-metro .fb,.tw,.gp,.fd{z-index:7; float:left;margin:1px;position:relative;display:block} .trickstoo-metro .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1YQgiTbZRFpLhkpsrRzxk758BkMH-2kXw2r6RaRzAxO1hmY9NAQwd-ejqAHbBS147l1jIuBfav43d75OAyQV5WY8xtxoZbA-BfdnbKrztBg-Y1Y-vEgLH9cP7AiNM3VJRX4MNN8DnjDqT/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px} .trickstoo-metro .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTA_2P0GtLjJW-dVZiAoX_Ol4YZ2RZRUPgjTApMtzCl2BqJgaxhGFZZLMu-RVaVYNrYLBr1Z8R3-dgqy3bLAkgoQhdJc5BknsZjvWtLqnsaarK0aT7fCLTrLr6nLBlLziamjBcbV_yNRFi/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:155px;height:70px} .trickstoo-metro .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OkL263o9mmHCwIwrV7CTb0TM2Ipow6q_xTzvdJMbbVzkH4G2gQRcFiEHviK4qzR9Xwpyc4J-ryPRrHEjQG-Z0QqHrWxWRSLTW1939ieSh8aX2GpxTbw5i6SsPBteRfFHF2D7KvXKErmr/s50/google%252Bplus.png) no-repeat center center #da4a38;width:155px;height:69px} .trickstoo-metro .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoG4cHqkEMa5xE_SGq4a2NB5u3WnOFNkR3TMIuVHVcNVosmItCdfeB6JH-RdlGtyLafyxfY0GPOM-49z841qdRqM-HXX661QLQ2ufoYSifVSjzorh5wt0-vas-tV3WOykwWMrLG6Njt21/s50/feed.png) no-repeat center center #e9a01c;width:297px;height:69px} .trickstoo-metro li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1YQgiTbZRFpLhkpsrRzxk758BkMH-2kXw2r6RaRzAxO1hmY9NAQwd-ejqAHbBS147l1jIuBfav43d75OAyQV5WY8xtxoZbA-BfdnbKrztBg-Y1Y-vEgLH9cP7AiNM3VJRX4MNN8DnjDqT/s200/facebook.png) no-repeat center center #1f69b3} .trickstoo-metro li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTA_2P0GtLjJW-dVZiAoX_Ol4YZ2RZRUPgjTApMtzCl2BqJgaxhGFZZLMu-RVaVYNrYLBr1Z8R3-dgqy3bLAkgoQhdJc5BknsZjvWtLqnsaarK0aT7fCLTrLr6nLBlLziamjBcbV_yNRFi/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5} .trickstoo-metro li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OkL263o9mmHCwIwrV7CTb0TM2Ipow6q_xTzvdJMbbVzkH4G2gQRcFiEHviK4qzR9Xwpyc4J-ryPRrHEjQG-Z0QqHrWxWRSLTW1939ieSh8aX2GpxTbw5i6SsPBteRfFHF2D7KvXKErmr/s200/google%252Bplus.png) no-repeat center center #da4a38} .trickstoo-metro li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoG4cHqkEMa5xE_SGq4a2NB5u3WnOFNkR3TMIuVHVcNVosmItCdfeB6JH-RdlGtyLafyxfY0GPOM-49z841qdRqM-HXX661QLQ2ufoYSifVSjzorh5wt0-vas-tV3WOykwWMrLG6Njt21/s200/feed.png) no-repeat center center #e9a01c}

Kode HTML Social media widget metro style

<div class="trickstoo-metro">
<li><a class="fb" href="http://facebook.com/taufanarts" rel="nofollow" target="_blank"></a></li>
<li><a class="tw" href="https://twitter.com/taufanwebsite" rel="nofollow" target="_blank"></a></li>
<li><a class="gp" href="https://plus.google.com/+TaufanNovianto" rel="nofollow" target="_blank"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/TaufanExperience" target="_blank" title="feedburner"></a></li>
</ul>
</div>