Salah satu bagian penting dari sebuah situs web adalah link teks. Dengan mengklik sebuah tag anchor Anda dapat pergi ke mana pun dari situs yang menunjuk ke halaman tertentu.
Link khusus berisi efek hover sederhana seperti penggunaan perubahan warna sederhana ketika mouse ditunjukan atau diklik. Tapi ada cara untuk membuat efek ini lebih baik dan menarik.
Sekarang, kita akan membahas cara untuk membuat link mengagumkan menggunakan fitur baru dari CSS3 : transition and transform. Pada akhir tutorial ini Anda akan memiliki efek hover link yang pasti akan membantu navigasi Anda.
Sumber daya yang Anda butuhkan untuk menyelesaikan tutorial ini adalah sebagai berikut:
- Font-Awesome
- Pengetahuan tentang CSS3 transitions dan transform
- Waktu dan kesabaran
Demo 1
Demo pertama akan memiliki efek sederhana sehingga ketika Anda mengarahkan mouse Anda, border tiga pixel akan keluar dari bagian belakang kota container teks link.
HTML
Dalam markup hanya akan berisi tag HTML5 nav yang memegang semua link pada demo kita. Pada setiap tag anchor ada class box dan demo-1. Kita juga akan menempatkan ikon font awesome sebelum link untuk membuat desain yang lebih keren.
<nav>
<a href="#" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a>
<a href="#" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a>
<a href="#" class="box demo-1"> <i class="fa fa-hand-o-left"></i> </i> <span>Demo 3</span></a>
<a href="#" class="box demo-1"> <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a>
</nav>
CSS
Untuk CSS, kita akan menggunakan selektor ::before dan ::after untuk menyisipkan border 3 pixel ketika mouse sedang menghover ke elemen tag anchor. Untuk membuat efek halus, kita akan menggunakan CSS3 transition.
.box{
color: #fff;
padding: 10px;
}
.box:hover{
background: #fff;
color: #26425E;
}
.demo-1 {
position: relative;
}
.demo-1:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.2s;
-webkit-transition-property: top, left, right, bottom;
-moz-transition-property: top, left, right, bottom;
-ms-transition-property: top, left, right, bottom;
-o-transition-property: top, left, right, bottom;
transition-property: top, left, right, bottom;
}
.demo-1:hover:before, .demo-1:focus:before{
-webkit-transition-delay: .1s;
-moz-transition-delay: .1s;
-ms-transition-delay: .1s;
-o-transition-delay: .1s;
transition-delay: .1s;
border: #fff solid 3px;
bottom: -7px;
left: -7px;
top: -7px;
right: -7px;
}
Demo 2
Demo kedua akan memiliki efek highlight halus di mana ketika Anda mengarahkan mouse Anda pada menu, maka akan menyoroti teks dan menambahkan border putus-putus pada bagian atas dan bawah teks.
HTML
Dalam markup ke dua hampir sama dengan demo pertama, namun kali ini akan menggunakan demo-2 sebagai class pada setiap tag anchor. Kita akan menggunakan data atribut HTML5 untuk memanipulasi efek hover melalui CSS nanti. Perhatikan kita menambahkan & nbsp; pada atribut data-text. Karena data atribut tidak akan mengambil ruang non-breaking, kita perlu menggunakan escape string untuk menempatkan beberapa ruang antara kata Demo dan jumlah demo. Selain dari escape string ini Anda juga dapat menggunakan code   untuk menciptakan output yang sama.
<nav>
<a href="#" class="demo-2" data-text="Demo 1">Demo 1</a>
<a href="#" class="demo-2" data-text="Demo 2">Demo 2</a>
<a href="#" class="demo-2" data-text="Demo 3">Demo 3</a>
<a href="#" class="demo-2" data-text="Demo 4">Demo 4</a>
</nav>
CSS
Sekarang ke CSS, kita akan menetapkan border putus-putus pada bagian atas dan bawah serta mengatur lebar dari atribut data-text ke nol. Menggunakan selektor :hover and :focus kita akan transisi lebar dari atribut data atribut maupun 2 garis putus-putus ke 100% untuk membuat efek highlight halus.
.demo-2{
color: #314559;
padding: 10px 0;
}
.demo-2::before {
color: #fff;
max-width: 0;
padding: 10px 0;
border-top: 1px dashed #fff;
border-bottom: 1px dashed #fff;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
content: attr(data-text);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.demo-2:hover::before,
.demo-2:focus::before {
max-width: 100%;
outline: none;
text-shadow: none;
}
Demo 3
Demo ketiga kita terinspirasi oleh Sebastian Ekström tentang efek link hover 3D. Ini akan memiliki efek flipping box background 3D ketika mouse diarahkan ke menu.
HTML
Markupnya hampir identik sama seperti dua demo pertama namun untuk membuat beberapa efek yang mengagumkan kita perlu menggunakan atribut data untuk mengulangi teks link dalam pseudo-element.
<nav>
<a href="#" class="demo-3"> <span data-text="Demo 1">Demo 1</span></a>
<a href="#" class="demo-3"><span data-text="Demo 2">Demo 2</span></a>
<a href="#" class="demo-3"><span data-text="Demo 3">Demo 3</span></a>
<a href="#" class="demo-3"><span data-text="Demo 4">Demo 4</span></a>
</nav>
CSS
Sekarang mari kita tambahkan beberapa magic untuk markupnya. Ide dasar untuk efek ini adalah bahwa kita akan translate3d dan perspective untuk menciptakan ilusi berputar keatas dan kotak mundur. Kita akan menggunakan overflow: hidden untuk klip kotak dan sisanya dari konten akan terlihat.
.demo-3 {
color: #fff;
display: inline-block;
text-decoration: none;
overflow: hidden;
vertical-align: top;
background: #1C3044;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.demo-3:hover span {
background: #314559;
-webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
-moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
-ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
.demo-3 span {
display: block;
position: relative;
padding: 10px 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.demo-3 span:after {
content: attr(data-text);
-webkit-font-smoothing: antialiased;
padding: 10px 20px;
color: #fff;
background: #0e6957;
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
-moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
-ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}
Perhatikan bahwa kami juga menggunakan properti rotateX bersama dengan translate3D. Ini akan membuat efek translating dan rotating kotak ketika teks tersebut diarahkan mouse.
Demo 4
Demo keempat akan berbeda. Kali ini kia akan flashing animasi border menggunakan properti keyframe CSS3.
HTML
Markup pada demo ini akan berbeda. Didalam tag nav kita akan menambahkan empat tag anchor dan menempatkan dua tag span didalam masing-masing tag anchor. Tag span pertama akan berisi teks untuk keadaan normal dan yang kedua untuk hover state. Kita juga akan menambahkan class demo-4 pada setiap tag anchor.
<nav>
<a href="#" class="demo-4">
<span>
<span>Demo 1</span>
<span>Hover</span>
<span></span>
</span>
</a>
<a href="#" class="demo-4">
<span>
<span>Demo 2</span>
<span>Hover</span>
<span></span>
</span>
</a>
<a href="#" class="demo-4">
<span>
<span>Demo 3</span>
<span>Hover</span>
<span></span>
</span>
</a>
<a href="#" class="demo-4">
<span>
<span>Demo 4</span>
<span>Hover</span>
<span></span>
</span>
</a>
</nav>
CSS
Sekarang saatnya untuk memberi efek hidup dapa link kita. Untuk membuat efek border berkedip, kita akan menggunakan fitur baru CSS3, properti @keyframe untuk membuat animasi. Pertama, kita perlu menentukan lebar container tag anchor serta border span.
.demo-4 {
width: 210px;
background-color: transparent;
cursor: pointer;
border-color: #bdc3c7;
}
.demo-4:hover {
border-color: #C672E9;
}
.demo-4 span:nth-child(1) {
color: #FCFCFC;
}
.demo-4 span:nth-child(2) {
color: #C672E9;
}
.demo-4 span {
font-family: 'Lato', sans-serif;
font-size: 28px;
letter-spacing: 3px;
}
.demo-4 {
position: relative;
box-sizing: border-box;
padding: 0;
border-style: none;
height: 65px;
display: inline-block;
}
.demo-4 span {
position: absolute;
box-sizing: border-box;
display: block;
}
Selanjutnya, kita perlu menentukan posisi dan properti dari content menggunakan selektor :before dan :after. Hal ini juga mencakup posisi border dan teks hover state.
.demo-4>span>span:nth-child(3), .demo-4:before, .demo-4:after, .demo-4>:first-child, .demo-4>:first-child:before, .demo-4>:first-child:after {
border-color: inherit;
display: block;
-moz-transition: border-color 0.3s ease;
-webkit-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
}
.demo-4:before, .demo-4:after, .demo-4>:first-child:before, .demo-4>:first-child:after {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
position: absolute;
box-sizing: border-box;
content: ' ';
}
.demo-4>span>span:nth-child(3), .demo-4:before, .demo-4:after, .demo-4>:first-child:before, .demo-4>:first-child:after {
border-width: 3px;
}
.demo-4>span>span:nth-child(3) {
border-radius: 3px;
}
.demo-4:before {
border-radius: 3px 0 0 3px;
}
.demo-4:after {
border-radius: 0 3px 3px 0;
}
.demo-4>:first-child:before {
border-radius: 3px 3px 0 0;
}
.demo-4>:first-child:after {
border-radius: 0 0 3px 3px;
}
.demo-4>:first-child {
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.demo-4>span span {
width: inherit;
text-align: center;
-moz-transition: opacity 0.6s ease, top 0.5s ease;
-webkit-transition: opacity 0.6s ease, top 0.5s ease;
transition: opacity 0.6s ease, top 0.5s ease;
}
.demo-4>span>span:nth-child(1) {
opacity: 1;
top: 18px;
}
.demo-4>span>span:nth-child(2) {
top: 37px;
opacity: 0;
}
.demo-4:hover>span>span:nth-child(1) {
opacity: 0;
top: 2px;
}
.demo-4:hover>span>span:nth-child(2){
opacity: 1;
top: 18px;
}
.demo-4>span>span:nth-child(3) {
top: 28%;
height: 44%;
width: inherit;
border-style: none solid none solid;
}
.demo-4:before, .demo-4:after {
top: 0;
width: 0;
height: inherit;
border-style: solid none solid none;
}
.demo-4>:first-child:before, .demo-4>:first-child:after {
left: 0;
height: 0;
width: inherit;
border-style: none solid none solid;
}
.demo-4:before {
-webkit-animation-name: left-center;
animation-name: left-center;
}
.demo-4:after {
-webkit-animation-name: right-center;
animation-name: right-center;
}
.demo-4>:first-child:before {
-webkit-animation-name: center-top;
animation-name: center-top;
}
.demo-4>:first-child:after {
-webkit-animation-name: center-bottom;
animation-name: center-bottom;
}
.demo-4:hover:before {
-webkit-animation-name: center-left;
animation-name: center-left;
}
.demo-4:hover:after {
-webkit-animation-name: center-right;
animation-name: center-right;
}
.demo-4:hover>:first-child:before {
-webkit-animation-name: top-center;
animation-name: top-center;
}
.demo-4:hover>:first-child:after {
-webkit-animation-name: bottom-center;
animation-name: bottom-center;
}
Perhatikan bahwa kita juga akan menempatkan nama animasi pada setiap selektor hover. Kali ini kita perlu mengerjakannya pada animasi. Berikutnya adalah animasi @keyframe diatur untuk Chrome, Safari, IE dan Firefox.
@-webkit-keyframes center-left {
0% {left: 40%; width: 8%; opacity: 0.2;}
25% {left: 25%; width: 15%;}
50% {left: 0%; width: 30%;}
80% {left: 0%; width: 0%;}
100% {left: 0%; width: 0%; opacity: 1;}
}
@-webkit-keyframes left-center {
0% {left: 0%; width: 0%; opacity: 1;}
20% {left: 0%; width: 0%;}
50% {left: 0%; width: 30%;}
55% {left: 40%; width: 11%;}
100% {left: 43%; width: 8%; opacity: 0.2;}
}
@-webkit-keyframes center-right {
0% {left: 52%; width: 8%; opacity: 0.2;}
25% {left: 60%; width: 15%;}
50% {left: 70%; width: 30%;}
80% {left: 100%; width: 0%;}
100% {left: 100%; width: 0%; opacity: 1;}
}
@-webkit-keyframes right-center {
0% {left: 100%; width: 0%; opacity: 1;}
20% {left: 100%; width: 0%;}
50% {left: 70%; width: 30%;}
55% {left: 49%; width: 11%;}
100% {left: 49%; width: 8%; opacity: 0.2;}
}
@-webkit-keyframes top-center {
0% {top: 0%; height: 0%; opacity: 0.2;}
50% {top: 0%; height: 0%;}
60% {top: 0%; height: 20%;}
80% {top: 0%; height: 50%;}
90% {top: 25%; height: 25%;}
100% {top: 50%; height: 0%; opacity: 1;}
}
@-webkit-keyframes center-top {
0% {top: 50%; height: 0%; opacity: 1;}
10% {top: 25%; height: 25%;}
20% {top: 0%; height: 50%;}
40% {top: 0%; height: 20%;}
50% {top: 0%; height: 0%;}
100% {top: 0%; height: 0%; opacity: 0.2;}
}
@-webkit-keyframes bottom-center {
0% {top: 100%; height: 0%; opacity: 0.2;}
50% {top: 100%; height: 0%;}
60% {top: 80%; height: 20%;}
80% {top: 50%; height: 50%;}
90% {top: 50%; height: 25%;}
100% {top: 50%; height: 0%; opacity: 1;}
}
@-webkit-keyframes center-bottom {
0% {top: 50%; height: 0%; opacity: 1;}
10% {top: 50%; height: 25%;}
20% {top: 50%; height: 50%;}
40% {top: 80%; height: 20%;}
50% {top: 100%; height: 0%;}
100% {top: 100%; height: 0%; opacity: 0.2;}
}
@keyframes center-left {
0% {left: 40%; width: 8%; opacity: 0.2;}
25% {left: 25%; width: 15%;}
50% {left: 0%; width: 30%;}
80% {left: 0%; width: 0%;}
100% {left: 0%; width: 0%; opacity: 1;}
}
@keyframes left-center {
0% {left: 0%; width: 0%; opacity: 1;}
20% {left: 0%; width: 0%;}
50% {left: 0%; width: 30%;}
55% {left: 40%; width: 11%;}
100% {left: 43%; width: 8%; opacity: 0.2;}
}
@keyframes center-right {
0% {left: 52%; width: 8%; opacity: 0.2;}
25% {left: 60%; width: 15%;}
50% {left: 70%; width: 30%;}
80% {left: 100%; width: 0%;}
100% {left: 100%; width: 0%; opacity: 1;}
}
@keyframes right-center {
0% {left: 100%; width: 0%; opacity: 1;}
20% {left: 100%; width: 0%;}
50% {left: 70%; width: 30%;}
55% {left: 49%; width: 11%;}
100% {left: 49%; width: 8%; opacity: 0.2;}
}
@keyframes top-center {
0% {top: 0%; height: 0%; opacity: 0.2;}
50% {top: 0%; height: 0%;}
60% {top: 0%; height: 20%;}
80% {top: 0%; height: 50%;}
90% {top: 25%; height: 25%;}
100% {top: 50%; height: 0%; opacity: 1;}
}
@keyframes center-top {
0% {top: 50%; height: 0%; opacity: 1;}
10% {top: 25%; height: 25%;}
20% {top: 0%; height: 50%;}
40% {top: 0%; height: 20%;}
50% {top: 0%; height: 0%;}
100% {top: 0%; height: 0%; opacity: 0.2;}
}
@keyframes bottom-center {
0% {top: 100%; height: 0%; opacity: 0.2;}
50% {top: 100%; height: 0%;}
60% {top: 80%; height: 20%;}
80% {top: 50%; height: 50%;}
90% {top: 50%; height: 25%;}
100% {top: 50%; height: 0%; opacity: 1;}
}
@keyframes center-bottom {
0% {top: 50%; height: 0%; opacity: 1;}
10% {top: 50%; height: 25%;}
20% {top: 50%; height: 50%;}
40% {top: 80%; height: 20%;}
50% {top: 100%; height: 0%;}
100% {top: 100%; height: 0%; opacity: 0.2;}
}
Disini kita telah membuat sebuah efek hover link teks. Jangan ragu untuk bereksperimen dengan efek yang lain. Ada kemungkinan yang tidak terbatas dan kami percaya Anda dapat mengembangkannya lagi. Kami harap bahwa Anda dapat mengambil pelajaran dari tutorial ini silahkan isi pada bagian komentar dan jangan lupa untuk share. Karena berbagi itu indah.
DEMO
