Add FA Link Arrwos for a Style - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Add FA Link Arrwos for a Style, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article CSS, Article CSS3, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Add FA Link Arrwos for a Style
link : Add FA Link Arrwos for a Style

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/

Thus articles Add FA Link Arrwos for a Style

that is all articles Add FA Link Arrwos for a Style This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Add FA Link Arrwos for a Style with the link address https://autopostingblogspot.blogspot.com/2015/11/add-fa-link-arrwos-for-style.html