» » Membuat Button Metro style

Membuat Button Metro style

Unknown 5:31 AM

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
metro buttonThis 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'><span class='navgreen'><span class='next-icon-white'></span></span></a>

kode HTML prev page::

<a href='url' title='prev page'><span class='navgreen'><span class='prev-icon-white'></span></span></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!
home