Membuat Link Hover Efek Rolling Right

Membuat Link Hover Efek Rolling Right - Salah satu trik SEO dalam optimasi blog yaitu dengan membuat atau menyertakan link pada artikel blog yang mengarah kehalaman berbeda dalam keterkaitan halaman yang sama,
Namun kali ini link yang akan saya beri efek dengan style rolling right saat hover, karena link tersebut tidak banyak yang merubah efek hovernya, dan mayoritas masih menggunakan link hover default pada template yang digunakan, yang kurang lebih seperti ini kode jika dalam HTML template

a:link active {text-decoration:none;color:blue;}
a:link visited {text-decoration:none}
a:link hover {text-decoration:none;color:red;}

Jika kita perhatikan pengaturan kode tersebut hanya untuk memberikan efek warna saja pada link. a:link active merupakan untuk memberi efek auto warna saat Anda membuat internal link pada artikel, sedangkan a:link hover merupakan untuk membuat efek warna berbeda dari link active saat hover, singkatnya link dengan teks warna BIRU akan berubah efek warnanya menjadi MERAH saat hover.

Diartikel kali ini, saya akan memberikan sedikit efek berbeda pada link saat hover dengan Membuat Efek Rolling Right.

<nav class="cl-effect-1">
<a href="/" data-hover="Sahabat"><span>Sahabat</span></a>
<a href="/" data-hover="Blogger"><span>Blogger</span></a>
<a href="/" data-hover="Tujuh-tujuh"><span>Tujuh-tujuh</span></a>
</nav>

CSS pembangun berikut saya susun dalam bentuk navigasi agar dapat menentukan kelas elemen HTML-nya, sehingga Anda bisa membuat link mana yang akan Anda buat efek rolling right pada halaman artikel Anda, link pada paragraf pertama, tengah atau akhir tulisan

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;}
.cl-effect-1 {position: relative;z-index: 1;}
.cl-effect-1 a {overflow: hidden;margin: 0 15px;}

.cl-effect-1 a span {
  display: block;
  padding: 10px 20px;
  background: #0f7c67;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;}

.cl-effect-1 a::before {
  position: absolute;
  top: 0;left: 0;
  z-index: -1;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #0f7c67;
  content: attr(data-hover);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(-25%);}

.cl-effect-1 a:hover span,
.cl-effect-1 a:focus span {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:focus::before {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);}

Semoga tutorial ini dapat memberikan manfaat kepada semua sahabat.