diff --git a/theme/index.hbs b/theme/index.hbs
index 0cbfdf8..6df8c21 100644
--- a/theme/index.hbs
+++ b/theme/index.hbs
@@ -52,6 +52,33 @@
     <!-- MathJax -->
     <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     {{/if}}
+    <style type="text/css">
+        a.button {
+                color:white;
+              font-family:Helvetica, sans-serif;
+              font-weight:bold;
+              font-size:12px;
+              text-align: center;
+              text-decoration:none;
+              background-color:#FFA12B;
+              display:inline-block;
+              position:relative;
+              padding:5px 10px;
+
+              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+              text-shadow: 0px 1px 0px #000;
+              filter: dropshadow(color=#000, offx=0px, offy=1px);
+
+              -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 2px 0 #915100;
+              -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 2px 0 #915100;
+              box-shadow:inset 0 1px 0 #FFE5C4, 0 2px 0 #915100;
+
+              -webkit-border-radius: 5px;
+              -moz-border-radius: 5px;
+              border-radius: 5px;
+        }
+    </style>
+
   </head>
   <body>
     <div id="body-container">
@@ -155,7 +182,7 @@
                 <i id="git-edit-button" class="fa fa-edit"></i>
               </a>
               {{/if}} ・
-              <a href="https://books.xfoss.com" title="捐赠，donate" aria-label="捐赠，donate">
+              <a href="https://books.xfoss.com" title="捐赠，donate" class="button" aria-label="捐赠，donate">
                 打赏，donate
               </a>
             </div>
