Sosyal Medya İkonları Yapımı

İste sizler için hazırlanan muhtesem bir sosyal medya iconları barındırma butonu..!

Hem alandan tasarruf ediyorsunuz hemde estetik ve sıklıgı yakalıyorsunuz. Web sitenize bu özelliği ekleyip site adreslerinizi bizimle yorumda paylaşabilirsiniz…

İşte o özelliğin kaynak kodları

HTML

 <div class="share">
<button class="share-toggle">
<span></span>
<span></span>
</button>
<div class="social">
<img src="https://i.postimg.cc/zff08ZJs/if-facebook-circle-color-107175.png" height="50" width="50">
<img src="https://i.postimg.cc/t4BNrSh2/if-youtube-circle-color-107167.png" height="50" width="50">
<img src="https://i.postimg.cc/YCDQN4HP/if-twitter-circle-color-107170.png" height="50" width="50">
<img src="https://i.postimg.cc/FzvSF3yY/if-dribbble-circle-color-107174.png" height="50" width="50">
</div> 
</div>

CSS

body {
padding: 0;
margin: 0 auto;
}
.share {
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 47%;
} 
img {
position: absolute;
transition: .5s ;
cursor: pointer;
} 
.share-toggle {
width: 50px;
height: 50px;
background-color: white;
border: 3px solid white;
box-shadow: 0px 20px 40px 0.5px gray;
border-radius: 50%;
position: absolute;
outline: none ;
z-index: 121;
cursor: pointer;
}
.share-toggle span {
width: 3px;
transform:translate(-50%,50%);
height: 25px;
position: absolute;
background-color: black;
transition: 0.5s ;
}
.share-toggle span:nth-child(1)
{
transform:translate(-50%,50%) rotate(90deg) ;
top: -5%;
left: 50%;
}
.share-toggle span:nth-child(2)
{
transform:translate(-50%,50%);
top: -5%;
left: 50%; 
}
.share-toggle.active span:nth-child(1) {
transform:translate(-50%,50%) rotate(45deg) ;
top: -5%;
left: 50%;
}
.share-toggle.active span:nth-child(2) {
transform:translate(-50%,50%) rotate(-45deg) ;
top: -5%;
left: 50%;
}

.social.opacity img:nth-child(1) {
transform: translate(-100%, -100%);
width: 70px;
height: 70px;
transition: .5s ; 
}
.social.opacity img:nth-child(2) {
transform: translate( 70%, -100%);
width: 70px;
height: 70px;
transition: .5s ;
}
.social.opacity img:nth-child(3) {
transform: translate( -100%, 80%);
width: 70px;
height: 70px;
transition: .5s ;
}
.social.opacity img:nth-child(4) {
transform: translate( 70%, 80%);
width: 70px;
height: 70px;
transition: .5s ;
}

JS

$(document).ready(function (){
  $(".share-toggle").click(function (){
     $(".share-toggle").toggleClass('active');
     $(".social").toggleClass('opacity'); 
                             });

           });

 

Bir önceki yazımız olan Sosyal Medya Sitesi Kurulumu başlıklı makalemizde açmak, css ve facebook yapımı hakkında bilgiler verilmektedir.