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..

Baca juga