21 Style Efek Link Download dan Demo Keren

membuat-style-keren-link-download-dan-demo-blog-website

Posting hari ini kita akan membuat Link Style untuk Blog atau Website yang nantinya bisa Anda terapkan sebagai tombol navigasi serperti,tombol download, demo, maupun menu navigasi. Teknik ini menggunakan  pseudo-elements dengan memasukan element tambahan :before dan :after dan selanjutnya diberi efek animation dan efek transisi sehinga menciptkan style link yang fresh dan modern. 


Tahap Persiapan :

Download file yang ada pada link diatas, file tersebut berisi html, css style dan file javascript yang akan ditambahkan di blog Anda.


Tahap Pertama :

Buka file component.css yang telah di download dan masuk ke HTML editor Template Blog, kemudian copy dan salin tag element nav sebelum  tag ]]></b:skin>, seperti berikut :

nav a {
 position: relative;
 display: inline-block;
 margin: 15px 25px;
 outline: none;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 text-shadow: 0 0 1px rgba(255,255,255,0.3);
 font-size: 1.35em;
}

nav a:hover,
nav a:focus {
 outline: none;
}

Selanjutnya pilih link style yang akan digunakan dan tambahkan sebelum tag  ]]></b:skin> seperti cara diatas. Disini penulis menggunakan contoh link efek  cl-effect-2, seperti berikut :


/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
 line-height: 44px;
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 perspective: 1000px;
}

.cl-effect-2 a span {
 position: relative;
 display: inline-block;
 padding: 0 14px;
 background: #2195de;
 -webkit-transition: -webkit-transform 0.3s;
 -moz-transition: -moz-transform 0.3s;
 transition: transform 0.3s;
 -webkit-transform-origin: 50% 0;
 -moz-transform-origin: 50% 0;
 transform-origin: 50% 0;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 height: 100%;
 background: #0965a0;
 content: attr(data-hover);
 -webkit-transition: background 0.3s;
 -moz-transition: background 0.3s;
 transition: background 0.3s;
 -webkit-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
 -webkit-transform-origin: 50% 0;
 -moz-transform-origin: 50% 0;
 transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
 -webkit-transform: rotateX(90deg) translateY(-22px);
 -moz-transform: rotateX(90deg) translateY(-22px);
 transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
 background: #28a2ee; 
}

Pada link css diatas menggunakan element hover transtition ditambahkan dengan element transform sehingga memberi efek 3D. Langkah berikutnya menambahkan fungsi javascript dibawah tepat diatas tag </head>, seperti berikut :

<script src="https://dl.dropboxusercontent.com/s/h1iozk0zvkpi8tm/modernizr.custom.js"></script>


Catatan, file javascript yang di download telah di hosting seperti diatas untuk menghemat ruang editor blog Anda.


Tahap Kedua :

Setelah memastikan tahap diatas telah benar waktunya untuk menambahkan Style Link ke posting, pada tahap ini buat lah posting baru untuk menguji link. So, setiap kali Anda membuat posting yang membutuhkan tombol link download dan demo gunakan tag HTML pada file index.html. Penulis menggunakan tag HTML untuk class cl-effect-2 untuk menindaklanjuti langkah sebelumnya :

<nav class="cl-effect-2">
 <a href="#"><span data-hover="Demo">Demo</span></a>
 <a href="#"><span data-hover="Download">Download</span></a>
</nav>


Catatan :
Untuk effect transform 3d tidak bisa berjalan di IE10 dan nama element .nav bisa Anda ganti dengan nama yang lain bila di style template Anda telah ada element dengan nama tersebut.

Akhir kata semoga koleksi dari Codrops ini memberikan inspirasi baru buat kita semua, dan jika Anda menyukai posting kali ini please klik like and share.


Comments

  1. Keren nih, akan saya aplikasikan di blog saya mas :)

    ReplyDelete
  2. gan sorry nih sebelumnya kalo keluar dari topik, tapi ane boleh minta template ente gk?

    ReplyDelete
  3. wuih, keren mas gan, tombol downloadnya,,, mau coba praktekin dulu diblog sya

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Popular posts from this blog

Membuat Kontak Blogger Hubungi Kami Menggunakan Google Drive

2 Style Navigasi Nomor Halaman Blogger

5 Aplikasi Kamera Android Terbaik 2014