Add FA Link Arrwos for a Style

Pada artikel sebelumnya AA sudah menginformasikan cara membuat link open new tab dengan varian tanda panah! Untuk melengkapi gaya/style pada trik tersebut, maka gue akan meneruskannya. Akan ada 9 buah gaya varian yang bisa sobat pakai. Ide ini saya dapatkan dari postingan FA link arrows codepen.io/ControlledChaos/pen/XmmxLg. Sangat cocok sekali bagi kalian yg sudah memakai font awesome icons! Kode link jadi masih mandiri, sehingga diperlukan kecerdasan kalian untuk memasukannya ke dalam code link yg sudah ada pada template. Intinya sobat tinggal menambahkan saja variabel code yg belum ada ;)

CSS kode link harus sudah ada varian sbb, kalau belum ada tinggal salin/tambahkan saja:

a {
  color: #333;
  text-decoration: none;
  outline: none;
}
a:after {
  display: inline-block;
  font-family: '';
  color: #1d9d74;
  transition: margin .2s;
}
a:hover:after {
  margin-left: .7em;
}
.semb:after {
  transition: all .25s;
  opacity: 0;
  margin-left: -.5em;
}
.semb:hover:after {
  opacity: 1;
  margin-left: .4em;
}

Jika sudah ada varian itu di dalam CSS kode link sobat, maka tahap selanjutnya menambahkan CSS kode ke-9 gaya!

FA arrow circle right

.fa-arrow-circle-right a:after {
  content: '\279C';
}
.fa-arrow-circle-right .roll-slide:after {
  transition: margin .25s, opacity .25s, transform .25s;
  transform: rotate(-180deg);
  opacity: 0;
  margin-left: -10px;
}
.fa-arrow-circle-right .roll-slide:hover:after {
  transition: margin .5s, opacity .25s, transform .5s;
  transform: rotate(0);
  opacity: 1;
  margin-left: .7em;
}

Syntax HTML <div class="fa-arrow-circle-right">

</div>

FA arrow right

.fa-arrow-right a:after {
  content: '\279C';
}
.fa-arrow-right .swoopIn:after {
  margin: 0;
  transform: rotate(20deg) translateX(-1.5em) translateY(-0.2em);
  opacity: 0;
}
.fa-arrow-right .swoopIn:hover:after {
  transition: opacity .25s, transform .5s;
  transform: rotate(0) translateX(0.5em) translateY(0);
  opacity: 1;
}

Syntax HTML <div class="fa-arrow-right">

</div>

FA chevron circle right

.fa-chevron-circle-right a:after {
  content: '\2794';
}
.fa-chevron-circle-right .roll-in:after {
  transition: margin .25s, opacity .25s, transform .25s;
  transform: rotate(-180deg);
  opacity: 0;
  margin-left: -10px;
}
.fa-chevron-circle-right .roll-in:hover:after {
  transition: margin .5s, opacity .25s, transform .25s;
  transform: rotate(0);
  opacity: 1;
  margin-left: .7em;
}

Syntax HTML <div class="fa-chevron-circle-right">

</div>

FA chevron right

.fa-chevron-right a:after {
  content: '\2771';
}
.fa-chevron-right .scale-bump {
  transform: translateY(1px);
}
.fa-chevron-right .scale-bump:after {
  margin: 0;
  transform: scale(0.6) translateX(0.3em) translateY(2px);
  transition: transform .25s;
}
.fa-chevron-right .scale-bump:hover:after {
  transform: scale(1) translateX(0.8em) translateY(1px);
}

Syntax HTML <div class="fa-chevron-right">

</div>

FA caret right

.fa-caret-right a:after {
  content: '\25BA';
}
.fa-caret-right .scale-up:after {
  margin: 0;
  transform: scale(0.8) translateX(0.4em);
  transition: transform .25s;
}
.fa-caret-right .scale-up:hover:after {
  transform: scale(1.6) translateX(0.4em);
}

Syntax HTML <div class="fa-caret-right">

</div>

FA long arrow right

.fa-long-arrow-right a:after {
  content: '\2799';
}
.fa-long-arrow-right .shoot-in:after {
  transition: margin 0s;
  margin-left: -10em;
  opacity: 0;
}
.fa-long-arrow-right .shoot-in:hover:after {
  transition: margin .35s, opacity .1s;
  margin-left: .5em;
  opacity: 1;
}

Syntax HTML <div class="fa-long-arrow-right">

</div>

FA share

.fa-share a:after {
  content: '\219D';
}
.fa-share .rotate-in:after {
  transform: rotate(-90deg) translateX(-1em) translateY(-1em);
  opacity: 0;
}
.fa-share .rotate-in:hover:after {
  transition: opacity .25s, transform .5s;
  transform: rotate(0) translateX(0) translateY(0);
  opacity: 1;
}

Syntax HTML <div class="fa-share">

</div>

FA paper plane

.fa-paper-plane a:after {
  content: '\21C9';
}
.fa-paper-plane .take-off:after {
  transform: rotate(30deg) skew(-15deg);
}
.fa-paper-plane .take-off:hover:after {
  margin-left: 1em;
}
.fa-paper-plane .take-off:after {
  margin: 0;
  transform: scale(2) rotate(0) skew(0) translateX(-2em) translateY(1em);
  opacity: 1;
  visibility: hidden;
}
.fa-paper-plane .take-off:hover:after {
  transform: rotate(30deg) translateX(8em) translateY(-20em);
  opacity: 0;
  visibility: visible;
  transition: transform 2s, opacity 1.8s, visibility .15s;
}

Syntax HTML <div class="fa-paper-plane">

</div>

FA Rocket

.fa-rocket a:after {
  content: '\27A1';
}
.fa-rocket .roket:after {
  margin: 0;
  transform: scale(2) translateX(-2em) translateY(1em);
  opacity: 1;
  visibility: hidden;
}
.fa-rocket .roket:hover:after {
  transform: rotate(30deg) translateX(8em) translateY(-20em);
  opacity: 0;
  visibility: visible;
  transition: transform 2s, opacity 1.8s, visibility .15s;
}

Syntax HTML <div class="fa-rocket">

</div>Perhatikan pada kode syntax HTML, masukanlah kode class="BLAH BLEH BLOH" bersamaan dengan tag post di dalam template blog sobat.
Ex:<div class="post fa-arrow-circle-right">

</div>Kalau masih bingung, pelajari lebih lanjut halaman berikut dan ada kode yg bentrok juga dengan emot :-s (lakuksan save page as) FA Link Arrows.

Happy arrow \m/