Membuat Button Metro style

Button Metro style memang lagi ngtrend dikalangan web designer
dalam artikel ini anda akan menemukan tutorial cara Membuat Button Navigasi untuk next dan prev page dengan css Metro style lebih keren dan modern selain dapat mempercantik tampilan blog kode css nya pun tidak cukup banyak dan tanpa menggunakan javascript sehingga tidak membuat blog menjadi berat

This Metro Button was inspired from Microsoft's Modern Design principles.
Demo nya bisa dilihat dibawah ini:

Button Next Page dan Prev page

kode css button metro style adalah seperti dibawah ini

.CSS Background button:

.navgreen{background: #35aa47;background-repeat: repeat no-repeat;display: inline-block;padding: 10px 14px;}

Css Hover Button:

.navgreen:hover{background:#09C426;}

Css Next Page:

.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;}

Css Prev Page:

.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;}

Kode html untuk Next page:

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

kode HTML prev page::

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

button metro style

untuk mengganti warna : ganti kode #35aa47; dengan kode warna sesuai dengan yanda inginkan
untuk merubah warna hovernya ganti kode #09C426; dengan kode warna sesuai selera anda.
Semoga dapat bermanfaat!