Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Hoş Sosyal Paylaşım Butonları (Css)

  • Konbuyu başlatan Emre KRMN
  • Başlangıç tarihi
Emre KRMN

Emre KRMN

Tilki Adayı
Katılım
6 May 2022
Mesajlar
50
Ticaret: 0 / 0 / 0
Merhaba arkadaşlar,
Bu konumda sizlere hoş ve güzel bir görünümü olan minimal tasarıma sahip siteleriniz için mükemmel bir sosyal paylaşım butonları paylaşacağım. Kodlar ücretsiz paylaşılmış ve üzerinde bir kaç oynama yaparak sitenize uygun hale getirebilirsiniz.

1
2

JavaScript Kodları:
JavaScript:
$(".d10-hide").hide();

$(".d10-trigger").click(function(){
  $(".d10-social").toggleClass("d10-collapse");
      if($(".d10-social").hasClass("d10-collapse")) {
    $(".d10-hide").fadeIn();
    $(".trigger").removeClass("ion-ios-redo-outline");
    $(".trigger").addClass("ion-ios-close-empty");
    $(".trigger").css("font-size","1.4em");
    $(".trigger").css("line-height","42px");
    }else {
    $(".d10-hide").fadeOut();
    $(".trigger").addClass("ion-ios-redo-outline");
    $(".trigger").removeClass("ion-ios-close-empty");
    }
});

Css Kodları:
CSS:
.d10-social {position:fixed; bottom:5px; right:20px; display:inline-block;}
.d10-social ul {list-style:none;}
.d10-social ul li {list-style:none; margin-top:10px;}

.d10-social ul li a {display:inline-block; color:#fff; border-radius:200px; width:55px; height:55px; background:rgba(0,0,0,0.2); text-align:center;}

.d10-social ul li a i.red {background:#F44336 !important;}
.d10-social ul li a i.blue {background:#2196F3 !important;}
.d10-social ul li a i.purple {background:#9C27B0 !important;}
.d10-social ul li a i.orange {background:#FF5722 !important;}
.d10-social ul li a i.green {background:#2E7D32 !important;}

.d10-social ul li a i.ote {line-height:42.5px;}

.d10-social ul li a i {width:40px; height:40px; display:inline-block; position:relative; line-height:40px; font-size:1.2em; top:7.5px; left:-0.5px; border-radius:999px;}

HTML Kodları:
HTML:
<link rel="stylesheet" type="text/css" media="screen" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div class="d10-social">
  <ul>
    <li><a href="#" class="d10-hide"><i class="blue ote ion-social-twitter-outline"></i></a></li>
    <li><a href="#" class="d10-hide"><i class="red ote ion-social-youtube"></i></a></li>
    <li><a href="#" class="d10-hide"><i class="blue ote ion-social-facebook-outline"></i></a></li>
    <li><a href="#" class="d10-trigger"><i class="orange ion-ios-redo-outline trigger"></i></a></li>
  </ul>
</div>