tool

<div class="penasharingDonasi pscom" role="region" aria-label="Donate">
  <div class="ikon">
    <a href="https://www.paypal.com/paypalme/anhtrainang"
       target="_blank" rel="noopener noreferrer"
       aria-label="Donate via PayPal">
      <svg aria-hidden="true" width="50" height="50" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path fill="#0D47A1" d="M174.225,303.616c1.76-11.04,11.328-19.2,22.624-19.2h47.04c92.448,0,164.8-37.248,185.952-144.992
          c0.64-3.2,1.632-9.344,1.632-9.344c6.016-39.872-0.032-66.912-21.76-91.456C385.842,11.584,342.642,0,287.378,0H126.993
          c-11.296,0-20.896,8.16-22.688,19.2L37.522,439.392c-1.312,8.288,5.152,15.776,13.6,15.776h99.008l24.864-156.48L174.225,303.616z
          M243.889,312.704h-42.176L170.225,512h68.416c9.888,0,18.304-7.136,19.84-16.832l0.8-4.224l15.744-98.912l1.024-5.44
          c1.536-9.696,9.952-16.832,19.808-16.832h12.512c80.864,0,144.16-32.576,162.656-126.816c7.424-37.824,3.84-69.536-14.496-92.448
          C433.554,256.576,360.242,312.704,243.889,312.704z"/>
      </svg>
      <span>Click</span>
    </a>
  </div>
  <div class="deskripsi">
    <span class="judul">Donate PayPal</span>
    Ủng hộ phát triển site bằng 1 ly cà phê nếu được nhé. Cảm ơn anh em!
  </div>
</div>
<style>
.pscom{
  --g1:#3c5b9a; --g2:#4f7bd6; --g3:#39b5e4;
  background: linear-gradient(45deg, var(--g1), var(--g2), var(--g1), var(--g3), var(--g1), var(--g3), var(--g1));
  background-size: 500% 500%;
  animation: pscom 12s ease infinite;
}
@keyframes pscom{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.penasharingDonasi{
  color:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:15px;
  padding:15px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  border-radius:7px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.penasharingDonasi .ikon a{
  background-color:#fff;
  color:#c10e0e;
  text-decoration:none;
  display:block;
  padding:6px 8px;
  border-radius:7px;
  text-align:center;
  animation: penasharingBounce 1.2s linear 1s infinite;
  will-change: transform;
}
.penasharingDonasi .ikon a:hover{
  transform: translateY(-1px);
}

.penasharingDonasi svg{
  display:block;
  width:50px; height:50px;
}
.penasharingDonasi .deskripsi{ line-height:1.6; }
.penasharingDonasi .deskripsi .judul{
  font-size:18px;
  font-weight:700;
  display:block;
  margin-bottom:8px;
}

@keyframes penasharingBounce{
  0%,100% { transform: scale3d(1,1,1); }
  30%     { transform: scale3d(1.18,.86,1); }
  45%     { transform: scale3d(.86,1.18,1); }
  60%     { transform: scale3d(1.08,.92,1); }
  75%     { transform: scale3d(1.03,.97,1); }
}

@media (prefers-reduced-motion: reduce){
  .pscom{ animation: none; }
  .penasharingDonasi .ikon a{ animation: none; }
}
</style>