إنضم لنا

Cara membuat efek link hover





Efek Link hover

Hai slamat malam
Akhrirnya article Ini sudah di pulikasikan karna saya telah menjadwalkannya Untuk dua hari bukan tanpa alasan memang sengaja karna artikel yang kemaren viewernya menurun .di sebabkan karna dua hari yang lalu saya mencoba untuk seting robot.txt di google conslo dan gagal akibatnya 1 per satu artikel saya hilang dari google search mungkin di cekal oleh robot.txt.

Udah lah bukan itu yang mau saya bahas, langsung saja pada kesempatan kali ini saya akan memberikan tutorial .cara membuat efek link hover seperti apa ini Contoh Nya dan juga seperti contooh gambar berikut






Lalu bagaimana cara membuat nya cukup mudah kalian tinggal pasang css di bawah ini tepat di atas code ]]><b:/skin> atau di atas </styles> 
*{
  margin: 0;
  padding: 0;
}

body{
  background: #f9f9f9;
  font-family: 'Roboto', sans-serif;
}

.container{
  width: 70%;
  margin: auto;
  margin-top: 5%;
  padding: 20px;
  text-align: justify;
}

.container h1{
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  text-transform: capitalize;
}

.container h3{
  font-size: 24px;
  text-align: center;
}

.container p{
  color: #555;
  line-height: 1.5;
  word-spacing: 1px;
  margin-bottom: 20px;
}

a{
  color: #e74c3c;
  position: relative;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;
}

a:hover{
  color: #222;
}

a:before, a:after{
  content: '';
  background: #e74c3c;
  position: absolute;
  width: 0;
  height: 2px;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;
}

a:before{
  top: 0;
  left: 0;
}

a:after{
  top: 100%;
  right: 0;
}

a:hover:before, a:hover:after{
  width: 100%;
}
Nah dengan begitu setiap anda membuat sebuah link maka akan ada evek hover nya



Code di atas tidak saya berikan keterangan sebab code di atas sudah jadi tinggal kalian pasang sajah . tapi jika kalian suka ber Experimen silahkan sajah .kalian oprek sesuai kebutuhan semoga artikel singkat ini bisa di pahami dan dapat di mengerti soalnya saya lgi kurang semangat .menulis artikel .




Terima kasih sudah mau mampir..
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail