Dijital Ürün Alış ve Satışı için: Buraya Tıkla
(1712)

Css İle Sosyal Medya İkonları

Css İle Sosyal Medya İkonları
PHP ile Verileri Şifreleme Sistemi
PHP ile Verileri Şifreleme Sistemi

31-10-2023 11:58

PHP for Döngüsü Kullanımı
PHP for Döngüsü Kullanımı

17-05-2023 12:19

Http’yi Https’e Yönlendirme
Http’yi Https’e Yönlendirme

26-10-2022 09:39

Php ile Önemli Bilgilere Yıldız Koyma
Php ile Önemli Bilgilere Yıldız Koyma

26-10-2022 10:34

Css İle Sosyal Medya İkonlarına Hover Efektleri

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	}
 h2 {
	font-family: 'Oswald', sans-serif;
	color: #212121;
	font-size: 30px;
	font-weight: bold;
	padding-left: 150px;
	margin-top: 50px;
  }
.sosyalbutonlar{
	margin-top: 50px;
	display: inline-block;
	position: relative;
	left: 200px;
	}
.sosyalbutonlar a  {
  background:#a1a1a1;
	text-decoration: none;
	color: #FFF;
	width: 60px;
	height: 60px;
	display: inline-block;
	border-radius: 10px;
	margin-right: 20px;
	font-size: 30px;
	overflow: hidden;
	position: relative;
	line-height: 60px;
	text-align: center;
  }
.sosyalbutonlar a{
   transition: transform 0.4s linear 0s,
	 border-top-left-radius 0.1s linear 0s,
	 border-top-right-radius 0.1s linear 0.1s,
	 border-bottom-right-radius 0.1s linear 0.2s,
	 border-bottom-left-radius 0.1s linear 0.3s;
}
.sosyalbutonlar .facebook:hover {
      background-color: #3b5998;
      transform: rotate(360deg);
      border-radius: 50%;
}
  .sosyalbutonlar .twitter:hover   {
      background-color: #00aced;
      transform: rotate(360deg);
      border-radius: 50%;
}
 .sosyalbutonlar .google-plus:hover   {
      background-color: #dd4b39;
      transform: rotate(360deg);
      border-radius: 50%;
}
 .sosyalbutonlar .instagram:hover   {
      background-color: #bc2a8d;
      transform: rotate(360deg);
      border-radius: 50%;
}
 .sosyalbutonlar .linkedin:hover   {
      background-color: #00aced;
      transform: rotate(360deg);
      border-radius: 50%;
}
 .sosyalbutonlar .youtube:hover   {
       background-color: #bb0000;
      transform: rotate(360deg);
      border-radius: 50%;
}

 

<html>
<head>
<meta charset="utf-8">
<title>Css İle Sosyal Medya İkonlarına Hover Efektleri</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Css İle Sosyal Medya İkonlarına Hover Efektleri</h2>
<div class="sosyalbutonlar">
      <a href="http://facebook.com/" target="_blank" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
      <a href="http://twitter.com" target="_blank" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      <a href="http://google-plus.com/" target="_blank" class="google-plus" ><i class="fa fa-google-plus" aria-hidden="true"></i></a>
      <a href="http://instagram.com/" target="_blank" class="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
      <a href="http://linkedin.com/" target="_blank" class="linkedin" ><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      <a href="http://youtube.com/" target="_blank" class="youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a>
</div>
</body>
</html>

 

Yorumlar: (0)
henüz yorum yok
Tema Ayarları

Kendi özelleştirilmiş stilini belirle

Mod Seç

Uygulamanız için mükemmel renk modunu seçin.

RTL Mode

Dil yönünüzü değiştirin

Fluid Layout

Tam ekran modu aç/kapat

Navigasyon Konumu

Web sitesi için uygun bir menü sistemi seçin

Görünüm