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.
Top comments (0)