How to Create a Donate Button Widget (HTML & CSS Only)

EN — Tue, 19 Dec 2023 08:08:56 +0000

Just get straight to the point, okay?

Install the HTML script

<div class="donatebox">
  <!-- Buy Me A Coffee -->
  <div class="donate_item buy_me_a_coffee">
    <div class="donate_item_image"><img alt="Buy Me A Coffee" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOK_cwYM1dyV1Q5OviNC3BAKoOUUOC5yPlS-vs_A70PS3NBZlBrj0iwNid6-FaxxF6nqiV3Eq0tIOWEArxzHKlujTIBO-CFgowMljZVoQVegoptMy43kSxYmbASqI8WmOvWfMNSHyci4xZnOnYMeVH0w820-HfemayII_l0Y0nwy2f4O5K5RilZ7nj/w200/Buy%20Me%20A%20Coffe.ico"></div>
    <div class="donate_item_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">Buy Me A Coffee</a></div>
  </div>

  <!-- Trakteer -->
  <div class="donate_item trakteer">
    <div class="donate_item_image"><img alt="Trakteer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg518anHj0JTlm4sWrkNM-AuREycZuGcX0MnVd311TiBiyXeNDCNKNdQJXnk0gdtNmVsBpPF8STv9XxMtPvUyQSLD8TVQ1o2e7_syIsVHeGygyL11tQIdWr7firNmGDFMWBoG8BqERrjj13GTAlqJfgJpDDHXzjselbOafpwClDc8RZ0hssSKv9-NUg5A/s1600/Trakteer-Logo.webp"></div>
    <div class="donate_item_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">Trakteer</a></div>
  </div>

  <!-- Saweria -->
  <div class="donate_item saweria">
    <div class="donate_item_image"><img alt="Saweria" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvrbHs-QmDuriZa48nZJoxq7O8DsZOSRja8m_rojuc14O0Y-xUsPMtEBNtKKmw-OSA5aCEnW-LmR-v9MBwsrZiVBWYiDT-6rdeiYdpO3B0ZNKSclaVrlHl6drxDkiY_Q4u8b4bSmT1ovW09eLuot7nQzgpk94yu-RseHVrhauLf_4tiqYVmmzpVR8/w200/Saweria.ico"></div>
    <div class="donate_item_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">Saweria</a></div>
  </div>

  <!-- PayPal -->
  <div class="donate_item paypal">
    <div class="donate_item_image"><img alt="PayPal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRbZveqXc9tzoOPegOW0wGD2b_UIoV_Nz3uKgRrG2F-KTIPkphdYVmyGmu06Pbck85jaa4FQnugpw667kRU8IF-lN_7ihEy_kjX3oCAw1cRbuovl7uykm9mOj3V0aEPSRxZ12eHglkrsh4Ns38JueysJ7CX-YzUjnLql-3ST1VNc5ZQgWT3qI1Vin/w200/PayPal.png"></div>
    <div class="donate_item_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">PayPal</a></div>
  </div>
</div>

Install the CSS script to style the appearance.

.donate_item {
  display:flex;
  align-items:center;
  background-color:#eee;
  border-radius:12px;
  padding:15px;
  position:relative;
  font-family:'Roboto', sans-serif;
}
.donate_item:not(:last-child) {
  margin-bottom:15px;
}
.donate_item:after {
  content:'';
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' fill='%233e3f43'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  width:24px;
  height:24px;
  margin-left:auto;
}
.donate_item:hover {
  box-shadow:inset 0 0 0 99999px rgb(0 0 0 / 15%);
}
.donate_item_image {
  flex:0 0 auto;
  line-height:0;
  margin-right:15px;
}
.donate_item_image img {
  width:35px;
  height:35px;
  border-radius:6px;
}
.donate_item_link {
  margin-right:15px;
}
.donate_item_link a {
  font-size:16px;
  font-weight:700;
  color:#202124;
  text-decoration:none;
}
.donate_item_link a:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1;
}

Finished

You can see a demo of the button here
Don't forget to visit the Fojap website for other tutorials.

DEV Community: EN

How to Create a Donate Button Widget (HTML & CSS Only)