Kategoriler
Kodlama

Animasyonlu paylaş butonu (HTML/CSS)

Yalnızca CSS kullanarak animasyonlu paylaş butonu yapıyoruz.

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.

wolkanca.com’da Animasyonlu paylaş butonu (HTML/CSS) veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Animasyonlu paylaş butonu (HTML/CSS) için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.