CSS3 Rollover Sosyal Medya Simgeler

Slide rollover animation

---

İlk görünüşte sade renksiz bir tasarım olarak görünse de simgelerin üzerine gelindiğinde yumuşak bir geçişle alt taraftan çıkan renkli simgeler bu tasarıma ayrı bir renk katmış. Kolay CSS kodlarıyla da rahat bir şekilde web sitenizin üzerine uygulayabilirsiniz.

CSS Kodu

.social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

Spinning rollover animation

---

Yine sade ve renksiz görünen bu tasarım üzerine gelindiğinde resmin kendi etrafında tam bir şekilde dönüp renkli simgelerin gelmesi bu tasarımı göze çarpıcı bir hale getirmiştir. Web sitenizde çarpıcı sosyal medya simgeleri istiyorsanız bu tasarım size göre.

CSS Kodu

.social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

Pop-out icons

---

Diğer sosyal medya simgelerinin aksine renkli şekilde gelen simgeler, üzerlerine gelindiğinde öne çıkarak altında bıraktığı gölgeyle, tasarımın sosyal medya simgelerinin daha ilgi çekici bir hale gelmesi sağlanmış. CSS kodunun yanında HTML kodu ile birlikte kod kısmı daha kolay bir hal almıştır.

HTML Kodu

<div class="social-popout"><img src="path/to/image.png" /></div>

CSS Kodu

.social-popout {
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img {
	border-radius: 50%;
	margin: 8px;
	width: 100%;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img:hover {
	margin: 0px;
	box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}