Bir ara buna benzer bir örneğe rastlamıştım. Butonların çerçeveleri dört köşe ve mouse ile gri renkli butonların üzerinden gezdirdiğimde her buton için farklı renkler atandığını görmüştüm. Baya bi güzel görünüyordu. Ordan aklıma geldide ona benzer bir tane yapmak istedim. Benimkinin renkleri biraz ciyak çıkmış. butonların çerçeveleri yuvarlak hover efekti sonrası arkaplan rengi gökkuşağı renginde ve bütün butonların hover (mouse üzerinde gezdirme) sonrası rengi aynı. İsterseniz bütün butonlara aynı renk kullanın yada kendinize özgü renkler ekleyin.
Tasarımı esnektir ve butonlar üst üste binse dahi butonların yerleri kaymaz. Ayrıca mouseyi butonların üzerinden gezdirdiğinizde butonlar biraz büyüyor. Bu sırada hiç bir buton yerinden oynamıyor. İsterseniz zoom oranını daha da arttırabilirsiniz. Bu işlem sırasında (hover efekti esnasında) beyaz renkli ikonlar siyah rengine dönüyor.
Daire şeklinde ıkan örneğimizde WeLoveIcon kullandım. İstediğim ikon çeşitleri tek grupta olmadığı için mecburen iki adet grup kullandım. Bu ikon gruplarından birtanesi fontawesome diğeri de zocial. WeLoveIcon sitesinden daha fazla ikon seçeneğine ulaşabilirsiniz. Rastgele karşıma çıkan ikonlar seçip ekledim. Kendi site içeriğinize ve kategorilerinize uygun ikonları kendiniz uyarlayabilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Bu kısım tek bir parça aslında ama dikkatinizi çekmek için import edilen WeLoveIcon fontlarını ayrı ve diğer kodu ayrı ekliyorum. Her iki parçayı da stil dosyasına ekleyip kullanabilirsiniz.
Font :
@charset "utf-8";
@import url(https://weloveiconfonts.com/api/?family=fontawesome);
@import url(https://weloveiconfonts.com/api/?family=zocial);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
Css :
.menu {
padding: 0;
width: 300px;
margin: 50px auto;
}
.menu li {
position:relative;
width:80px;
height:80px;
float:left;
margin: 3px 3px 3px 3px;
list-style-type: none;
-webkit-transition: all 0.1s linear;
}
.menu li:hover {
opacity: 1;
z-index: 10;
}
.menu a{
display:table;
text-decoration:none;
}
.menu a span{
cursor:pointer;
border-radius: 40px;
-moz-border-radius: 40px;
color: #fff;
display: block;
font-size: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all .1s ease-in-out;
vertical-align: middle;
width: 80px;
height: 80px;
}
.menu a span.off{
display:table-cell;
opacity:1;
}
.menu a span.on{
display:block;
position:absolute;
top:0;
left:0;
opacity:0;
line-height:80px;
font-size:40px;
}
.menu li:nth-of-type(1) a span{
background-color:#0000FF;
}
.menu li:nth-of-type(2) a span{
background-color:#00FF33;
}
.menu li:nth-of-type(3) a span{
background-color:#FF00FF;
}
.menu li:nth-of-type(4) a span{
background-color:#66CCFF;
}
.menu li:nth-of-type(5) a span{
background-color:#FF0000;
}
.menu li:nth-of-type(6) a span{
background-color:#FFFF33;
}
.menu li:nth-of-type(7) a span{
background-color:#99CC33;
}
.menu li:nth-of-type(8) a span{
background-color:#00CC99;
}
.menu li:nth-of-type(9) a span{
background-color:#CC99FF;
}
/* Animation */
.menu li:hover .off{
opacity:0;
-webkit-transition-delay:0.05s;
-webkit-transform:scale(.8);
}
.menu li .on{
background-color:rgba(255,255,255,.8);
-webkit-transition: all .3s ease-in-out;
}
.menu li:hover .on{
opacity:1;
color:rgba(0,0,0,.7);
-webkit-text-stroke-color:rgba(255,255,255,.1);
-webkit-text-stroke-width:1px;
background-color:rgba(255,255,255,.5);
background-image:
-webkit-repeating-radial-gradient(
top center,
circle,
rgba(248,255,173,.7) 0%,
rgba(255,187,160,.7) 25%,
rgba(231,255,183,.7) 50%,
rgba(183,238,255,.7) 75%,
rgba(255,191,248,.7) 100%
);
-webkit-transition-delay:0.2s;
-webkit-transform:scale(1.2);
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<ul class="menu"> <li><a href="https://www.mintik.com"><span class="off fontawesome-home"></span><span class="on fontawesome-home"></span></a></li> <li><a href="https://www.mintik.com/tag/jquery-ornekler/"><span class="off fontawesome-beaker"></span><span class="on fontawesome-beaker"></span></a></a></li> <li><a href="https://www.mintik.com/feed"><span class="off fontawesome-rss"></span><span class="on fontawesome-rss"></span></a></a></li> <li><a href="https://www.mintik.com/tag/css3-ornekleri/"><span class="off zocial-android"></span><span class="on zocial-android"></span></a></a></li> <li><a href="https://www.mintik.com/tag/wordpress-magazin-temalari/"><span class="off zocial-appstore"></span><span class="on zocial-appstore"></span></a></a></li> <li><a href="https://www.mintik.com/tag/wordpress/"><span class="off zocial-wordpress"></span><span class="on zocial-wordpress"></span></a></a></li> <li><a href="https://www.mintik.com/tag/wordpress-eklentiler/"><span class="off zocial-evernote"></span><span class="on zocial-evernote"></span></a></a></li> <li><a href="https://www.mintik.com/tag/ucretsiz-wordpress-temalari/"><span class="off zocial-podcast"></span><span class="on zocial-podcast"></span></a></a></li> <li><a href="https://www.mintik.com/tag/html5/"><span class="off zocial-html5"></span><span class="on zocial-html5"></span></a></a></li> </ul>