Simple CSS ONLY donate button

Here’s a simple CSS only donate button. You can use it to style your PayPal or any other donation links.

CSS

/*	Donate button */

.el-donate {
    text-align: center;
    margin: 1rem 0 0.5rem 0;
}

.el-donate a {
    font-size: 1em;
    padding: 0.4rem 0.7rem;
    background: #009BC9;
    border: 2px solid #1b85a6;
    border-radius: 3px;
    color: #01485e !important;
    text-shadow: 1px 1px 1px #bbb;
}

.el-donate a:hover {
    color: #00242f !important;
    background: #008bb4;
    text-shadow: 1px 1px 1px #aaa;
}

HTML

<div class="el-donate"><a href="https://www.paypal.me/AashikP" target="_blank">Donate</a></div>

Replace https://www.paypal.me/AashikP with your donation link

Output

This is the final output:

donate-button-style
Normal
donate-hover-style
On Hover

/

Report (Please include link to post while reporting)

Leave a Reply

Your email address will not be published. Required fields are marked *