Updting Buy me a Coffee button

Author: SteveWilkes

_layouts/default.html

@@ -20,10 +20,6 @@
 
     <!-- CSS Styles -->
     <link href="/assets/css/style.css" rel="stylesheet">
-
-    {% if page.layout == 'post' %}
-    <link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
-    {% endif %}
 </head>
 
 {% capture layout %}{% if page.layout %}layout-{{ page.layout }}{% endif %}{% endcapture %}
@@ -47,7 +43,10 @@
     </div><!-- .site -->
     {% if page.layout == 'post' %}
     <a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/agileobjects">
-        <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px;font-size:28px !important;">Buy me a coffee</span>
+        <span>
+            Thanks for reading my blog!<br />Care to treat me to a coffee?
+            <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee" />
+        </span>
     </a>
     {% endif %}
     <!-- Javascript Assets -->

_sass/_buy-me-a-coffee.scss

@@ -1,13 +1,8 @@
 @import "_variables.scss";
 
-.bmc-button img {
-    border: none !important;
-    box-shadow: none !important;
-    height: 34px !important;
-    margin-bottom: 1px !important;
-    vertical-align: middle !important;
-    width: 35px !important;
-}
+$coffee-img-size: 40px;
+$coffee-img-margin-top: -($coffee-img-size / 2);
+$coffee-img-margin-right: -($coffee-img-size / 10);
 
 .bmc-button {
     background-color: #FFFFFF !important;
@@ -20,16 +15,29 @@
     box-sizing: border-box !important;
     color: #000000 !important;
     display: inline-flex !important;
-    font-family: 'Cookie', cursive !important;
-    font-size: 22px !important;
-    height: 51px !important;
-    letter-spacing: 0.6px !important;
-    line-height: 35px !important;
-    margin: 0 auto !important;
-    padding: 7px 15px 7px 10px !important;
+    padding: 7px 7px 7px 10px !important;
     position: fixed;
     right: 5%;
+    text-align: center;
     text-decoration: none !important;
+
+    span {
+        display: block;
+        font-size: .8em;
+        padding-right: $coffee-img-size;
+        position: relative;
+    }
+
+    img {
+        border: none !important;
+        box-shadow: none !important;
+        height: $coffee-img-size !important;
+        margin: $coffee-img-margin-top $coffee-img-margin-right 0 0;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        width: $coffee-img-size !important;
+    }
 }
 
 .bmc-button:hover, .bmc-button:active, .bmc-button:focus {
@@ -38,4 +46,4 @@
     color: #000000 !important;
     opacity: 0.85 !important;
     text-decoration: none !important;
-}
+}