Cute Link Box 1

sebelum hover

setelah hover

 Assalamu'alaikum! Lama gak posting tutobies nih. Alasan terbesarnya sih Resti lagi males #jangan ditiru#. Kemareeeen Kak Nafisa request buat linkbox terus aku post. Tapi sekarang aku post linkbox yang berbeda.


1. Dashboard
2. Laman/Post (terserah kamu akan menaruhnya dimana)
3. Html (sebelah compose)
4. Taruh kode dibawah ini

<style>
a.ranna {
font-size: 12px;
font-family: century gothic;
display:inline-block;
text-align:center;
width: 70px;
color:#fea5c2;
background:#fff5f7;
border-top: 3px dotted pink;
border-bottom: 3px dotted pink;
border-left: 10px solid pink;
border-right: 10px solid pink;
padding:3px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.ranna:hover          {
display:inline-block;
text-align:center;
box-shadow: 1px 5px 5px 5px #ffd9d9;
width: 70px;
color: pink;
border-top: 3px dashed pink;
border-bottom: 3px dashed pink;
border-left: 10px double pink;
border-right: 10px double pink;
background:#ffffff;
-webkit-transition-duration:1200ms;
-moz-border-radius: 35px;
border-radius: 35px;
}
</style>
<br />
<center>
</center>
<center>
<span style="color: magenta;"><br /></span></center>
<center>
</center>
<center>
<a class="ranna" href="https://.blogspot.com/">Who</a>
<a class="ranna" href="https://.blogspot.com/">Who</a>
<a class="ranna" href="https://.blogspot.com/">Who</a>
<a class="ranna" href="https://.blogspot.com/">Who</a>
<a class="ranna" href="https://.blogspot.com/">Who</a>
<a class="ranna" href="https://.blogspot.com/">Who</a>
<a class="ranna" href="https://.blogspot.com/">Who</a>

-edit-edit sesukamu dulu

5. Save

Mudah kan?

---

Terima kasih telah membaca, tinggalkan komentar ya!

---