Make Arrow for Link Open New Tab use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Arrow for Link Open New Tab use CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article Snippet, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Arrow for Link Open New Tab use CSS
link : Make Arrow for Link Open New Tab use CSS

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

Thus articles Make Arrow for Link Open New Tab use CSS

that is all articles Make Arrow for Link Open New Tab use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Arrow for Link Open New Tab use CSS with the link address https://autopostingblogspot.blogspot.com/2015/10/make-arrow-for-link-open-new-tab-use-css.html