diff --git a/static-src/styles.css b/static-src/styles.css
index 4075514..e8ab930 100644
--- a/static-src/styles.css
+++ b/static-src/styles.css
@@ -572,16 +572,42 @@ input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:h
a.button i {
font-size: 1.4em;
}
-a.button.button--liberapay {
+a.button--donate {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-right: 12px;
padding: 8px 16px;
font-size: 0.95rem;
- color: #333;
- background-color: #ffee16;
border: 0;
}
-a.button.button--liberapay:hover {
+a.button--donate svg {
+ width: 24px;
+ height: 24px;
+ fill: var(--text-color);
+}
+a.button--donate.button--liberapay {
+ color: #333;
+ background-color: #ffee16;
+}
+a.button--donate.button--liberapay svg {
+ fill: #333;
+}
+a.button--donate.button--liberapay:hover {
+ color: #333;
background-color: #fff463;
}
+a.button--donate.button--kofi {
+ color: #333;
+ background-color: #1ac0ff;
+}
+a.button--donate.button--kofi svg {
+ fill: #333;
+}
+a.button--donate.button--kofi:hover {
+ color: #333;
+ background-color: #66d4ff;
+}
button.inline {
min-height: auto;
margin: 0;
diff --git a/views/index.pug b/views/index.pug
index 38d3047..3456f9c 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -90,6 +90,9 @@ block content
p
| We rely on your support to keep working on Big Tech-independent secure online identity.
p
- a.button.button--liberapay(href='https://liberapay.com/Keyoxide/')
- i(class='fa fa-liberapay' aria-hidden='true')
- | Donate via Liberapay
\ No newline at end of file
+ a.button.button--donate.button--liberapay(href='https://liberapay.com/Keyoxide/')
+
+ | Donate via Liberapay
+ a.button.button--donate.button--kofi(href='https://ko-fi.com/keyoxide/')
+
+ | Donate via Ko-fi
\ No newline at end of file