Animasyonlu paylaş butonu (HTML/CSS)

Sadece HTML ve CSS kullanarak animasyonlu bir paylaş butonu oluşturacağız. Basitçe, paylaşma butonu, kullanıcının sosyal medya aracılığıyla takipçilerine resim, video, müzik göndermesine yardımcı olan bir düğme anlamına gelir. Facebook, Twitter, Linkedin, YouTube ve diğerleri gibi herhangi bir sosyal medya olabilir. Günümüzde paylaşım düğmeleri, kullanıcının paylaşımını kolaylaştırmak için hemen her web sitesi ve mobil uygulamada kullanılmaktadır.

Bu uygulamamızda ekranda yalnızca bir buton/düğme var, bu düğme tıklandığında, bu dört sosyal medya simgesiyle birlikte yukarıdan düğmeye düzgün kayan animasyonlu olarak gösterir. Bu sosyal medya düğmesi üzerine geldiğinde üç renk orijinal renge dönüşür ve bu simgeler biraz yukarı doğru hareket eder.

Örnek uygulama: https://codepen.io/wolkanca/full/dyOzxeG

Bu örnek kodları isteğinize ve ihtiyaçlarınıza göre düzenleyebilirsiniz.

HTML:

<div class="mainbox">
  <input type="checkbox" id="check">
  <label for="check">Paylaş</label>
  <div class="media-icons">
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
</div>

CSS:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #0984e3
}
.mainbox{
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}
label{
  position: relative;
  background: #fff;
  height: 50px;
  width: 150px;
  border-radius: 35px;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  color: #0984e3;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
label:hover{
letter-spacing: 1px;
}
label::before{
  content: 'Kapat';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 35px;
  opacity: 0;
}
#check{
  display: none;
}
#check:checked ~ label::before{
  opacity: 1;
}
.media-icons{
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  background: #fff;
  width: 140%;
  height: 110%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 35px;
  padding: 4px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
#check:checked ~ .media-icons{
  opacity: 1;
  pointer-events: auto;
  top: -84px;
}
.media-icons::before{
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  background: #fff;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
.media-icons a{
  font-size: 22px;
  color: #0984e3;
  transition: all 0.3s ease;
}
.media-icons a:hover{
  transform: translateY(-2px);
}
.media-icons a:nth-child(1):hover{
  color: #426782;
}
.media-icons a:nth-child(2):hover{
  color: #1da1f2;
}
.media-icons a:nth-child(3):hover{
  color: #e1306c;
}
.media-icons a:nth-child(4):hover{
  color: #ff0000;
}

İkonlar için fontawesome.com kullandım.

Kolay gelsin.