◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Arrow for Link Open New Tab use CSS

Bahan-bahan atau bumbu-bumbu koding sudah bertebaran dimana-mana. Tinggal urusan kreatifitas kita saja dalam urusan pemakaian. Sudah tentu dengan pertimbangan yang matang. Seperti tutorial ringan berikut tentang bagaimana cara membuat link external. Maksudnya di sini adalah kita akan memberikan tanda kepada link dengan perintah "_blank", "_top", "top", "new" agar pendatang bisa mengetahui bahwasannya link tersebut akan terbuka new tab. Dahulu trik ini bisa kita gunakan dengan bantuan jQuery script. Sekarang AA Koben akan kasih tauk bagaimana cara membuat hal serupa murni dengan menggunakan CSS.

Source sumber tutorial gue dapet dari codepen.io/Antariano/pen/vNeJrN
Bagi sobat yang suka dengan gaya dari sumber, silahkan langsung pakai dengan kode yg sudah disediakan. Gue akan beri kalian dengan kode yg sudah modifikasi. Berikut kode CSS sumber yg sudah di compiled

a {
display: inline-block;
color: #1A0DAB;
transition: all .2s ease;
text-decoration: none;
padding: .1em;
position: relative;
z-index: 10;
}
a:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1%;
border-bottom: 1px dotted #1A0DAB;
background-color: transparent;
transition: all .3s ease;
z-index: -1;
}
a:hover {
text-decoration: none;
color: #fff;
}
a:hover:before {
height: 100%;
border: none;
background-color: #3B78E7;
}
a[target="_blank"]:after {
content: '[Opens in new tab]';
position: absolute;
top: 100%;
font-style: italic;
left: 0;
transform: translateY(-100%);
background: #3B78E7;
width: 100%;
text-align: center;
height: 16px;
font-size: 11px;
line-height: 12px;
transition: all 0.2s ease-out;
color: rgba(255, 255, 255, 0.85);
opacity: 0;
z-index: -1;
pointer-events: none;
}
a[target="_blank"]:hover:after {
transform: translateY(0);
opacity: 1;
}
Midification CSS coded...

a {
display: inline-block;
color: #1A0DAB;
transition: all .2s ease;
text-decoration: none;
padding: 0;
position: relative;
z-index: 10;
}
a:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1%;
z-index: -1;
}
a:hover {
text-decoration: none;
}
a[target="_blank"]:after {
content: '\2197';
position: absolute;
top: 15%;
font-weight: bold;
right: 0;
width: 100%;
text-align: right;
height: 16px;
font-size: large;
line-height: 16px;
transition: all 0.2s ease-out;
color: #006621;
opacity: 0;
z-index: -1;
pointer-events: none;
}
a[target="_blank"]:hover:after {
transform: translateY(0);
opacity: 1;
right: -3px;
}
a[target="_blank"]:hover {
padding-right: 10px;
}
Karena properti kode tidak memakai unik ID, maka yg harus sobat lakukan adalah menambahkan kode CSS link tersebut ke dalam kode link yg sudah kalian miliki! Setiap penulisan syntax HTML seperti berikut<a href="http://google.com" target="_blank">TITLE</a>DEMO: codepen.io/beben-koben/pen/QjqRZY
Loading...
XMake Arrow for Link Open New Tab use CSS
Membuat tanda panah untuk link yang akan terbuka secara new tab menggunakan CSS.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE