Added two layer button for website contribute section and set overflow hidden

Author: amir2mi

ATTRIBUTION.md

@@ -17,7 +17,7 @@ Search by Graphik Designz from the Noun Project
 Check by James Kocsis from the Noun Project
 Heart by BomSymbols from NounProject.com
 Share by shaurya from NounProject.com
-Coffee by Gregor Cresnar from NounProject.com
+Coffee by Adrien Coquet from NounProject.com
 
 ### Flaticon
 

dist/css/flatify-min.css

@@ -1,5 +1,5 @@
 /*!
- * FlatifyCSS version 1.0.3-7
+ * FlatifyCSS version 1.0.3-8
  * Modern flat design framework for the web — inspired by Duolingo design system.
  * Copyright 2021-2022 The FlatifyCSS Authors
  * Licensed under MIT (https://github.com/amir2mi/flatifycss/blob/master/LICENSE)

dist/css/flatify-noprefix-min.css

@@ -1,6 +1,6 @@
 {
 	"name": "flatifycss",
-	"version": "1.0.3-7",
+	"version": "1.0.3-8",
 	"description": "Modern flat design framework for the web — inspired by Duolingo design system.",
 	"main": "index.html",
 	"repository": {

dist/css/flatify-noprefix.css

@@ -6,6 +6,7 @@
   @extend .overlay-layer;
   --#{$CSS_VAR_PFX}overlay-layer-priority: 0;
   --#{$CSS_VAR_PFX}overlay-layer-opacity: 0;
+  overflow: hidden;
 
   .secondary-text {
     position: absolute;

dist/css/flatify-rtl-min.css

@@ -1,5 +1,5 @@
 /*!
- * FlatifyCSS version 1.0.3-7
+ * FlatifyCSS version 1.0.3-8
  * Modern flat design framework for the web — inspired by Duolingo design system. 
  * Copyright 2021-2022 The FlatifyCSS Authors
  * Licensed under MIT (https://github.com/amir2mi/flatifycss/blob/master/LICENSE)

dist/css/flatify-rtl-noprefix-min.css

@@ -29,14 +29,10 @@ Here is an example:
             <button class="button two-layer-button style-green size-lg">
                 Buy me a coffee
                 <span class="secondary-text">
-                    <svg viewBox="100 50 450 450">
-                        <g>
-                        <path d="m456.4 218.4h-280v110.27c-0.0625 22.309 4.2969 44.406 12.836 65.016 8.5352 20.609 21.074 39.32 36.895 55.047l4.9297 4.9297h148.29l4.9297-4.9297c26.02-25.891 42.875-59.574 47.992-95.926h24.133c24.012 0 46.195-12.809 58.199-33.602 12.004-20.789 12.004-46.406 0-67.199s-34.188-33.602-58.199-33.602zm-56 110.27c0.097656 33.77-12.445 66.352-35.168 91.336h-120.06c-22.719-24.984-35.266-57.566-35.168-91.336v-76.664h190.4zm56-9.4648h-22.398v-67.199h22.398c12.004 0 23.098 6.4023 29.102 16.801 6 10.395 6 23.203 0 33.598-6.0039 10.398-17.098 16.801-29.102 16.801z"/>
-                        <path d="m282.8 106.4h33.602v67.199h-33.602z"/>
-                        <path d="m361.2 106.4h33.602v67.199h-33.602z"/>
-                        <path d="m204.4 106.4h33.602v67.199h-33.602z"/>
-                        </g>
-                    </svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="50 -20 600 600">
+                    <path d="M350 437.36c-30.801 0-59.359-12.32-80.641-34.16h-51.52l12.879 123.2c1.121 11.199 10.641 19.602 21.84 19.602h195.44c11.199 0 20.719-8.398 21.84-19.602l12.879-123.2h-51.52c-21.84 21.84-50.398 34.16-81.199 34.16zM509.04 103.04H190.96c-2.8 0-4.48 2.238-4.48 5.04l14.559 137.76h68.32c21.28-21.84 49.84-34.16 80.64-34.16s59.36 12.32 80.642 34.16h68.32l14.559-137.76c0-2.798-1.68-5.04-4.481-5.04zM191.52 80.078h317.52c2.8 0 5.04-2.8 4.48-5.04l-6.16-29.12c-.558-2.238-2.238-3.36-4.48-3.36h-49.281L446.88 21.84c-1.68-4.481-5.602-7.84-10.641-7.84h-172.48c-4.48 0-8.96 2.8-10.641 7.84l-6.719 20.719h-49.28c-2.24 0-3.923 1.68-4.481 3.359l-6.16 29.12c.003 2.243 2.242 5.04 5.043 5.04z"></path>
+                    <path d="M350 235.2c-28.559 0-53.762 13.441-70 34.16h-76.16l11.762 110.32H280c16.238 20.719 42 34.16 70 34.16 28.559 0 53.762-13.441 70-34.16h64.398l11.762-110.32H420c-16.238-20.719-41.441-34.16-70-34.16z"></path>
+                  </svg>
                 </span>
             </button>
 		</div>

dist/css/flatify-rtl-noprefix.css

@@ -96,6 +96,14 @@
   margin: 0 auto;
 }
 
+.contribute-button {
+  --flatify__two-layer-button-animation-show: flatify-slide-up-in 0.3s 0.1s;
+}
+
+.donate-button {
+  --flatify__two-layer-button-animation-show: flatify-slide-down-in 0.3s 0.1s;
+}
+
 @media screen and (min-width: 1200px) {
   .homepage-contribute .featured-button {
     font-size: 1.85em !important;
@@ -124,7 +132,7 @@
   .contribute-texts .flex-center {
     flex-direction: column;
   }
-  .featured-button{
+  .featured-button {
     margin-top: 1em;
   }
 }

dist/css/flatify-rtl.css

@@ -15,16 +15,18 @@ export default function HomepageContribute() {
           <a
             href="https://github.com/amir2mi/flatifycss"
             target="_blank"
-            className={`button size-2x featured-button ${isDarkTheme ? "style-dark" : "style-light"}`}
+            className={`button two-layer-button size-2x featured-button contribute-button ${isDarkTheme ? "style-dark" : "style-light"}`}
           >
             Contribute
+            <span className="secondary-text">{svg.github}</span>
           </a>
           <a
             href="https://www.buymeacoffee.com/amir2mi"
             target="_blank"
-            className="button size-2x style-accent featured-button"
+            className="button two-layer-button size-2x style-accent featured-button donate-button"
           >
             Buy a coffee
+            <span className="secondary-text">{svg.coffee}</span>
           </a>
         </div>
       </div>

dist/css/flatify.css

@@ -185,6 +185,13 @@ export default {
       />
     </svg>
   ),
+  coffee: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="50 -20 600 600">
+        <title>Coffee</title>
+      <path d="M350 437.36c-30.801 0-59.359-12.32-80.641-34.16h-51.52l12.879 123.2c1.121 11.199 10.641 19.602 21.84 19.602h195.44c11.199 0 20.719-8.398 21.84-19.602l12.879-123.2h-51.52c-21.84 21.84-50.398 34.16-81.199 34.16zM509.04 103.04H190.96c-2.8 0-4.48 2.238-4.48 5.04l14.559 137.76h68.32c21.28-21.84 49.84-34.16 80.64-34.16s59.36 12.32 80.642 34.16h68.32l14.559-137.76c0-2.798-1.68-5.04-4.481-5.04zM191.52 80.078h317.52c2.8 0 5.04-2.8 4.48-5.04l-6.16-29.12c-.558-2.238-2.238-3.36-4.48-3.36h-49.281L446.88 21.84c-1.68-4.481-5.602-7.84-10.641-7.84h-172.48c-4.48 0-8.96 2.8-10.641 7.84l-6.719 20.719h-49.28c-2.24 0-3.923 1.68-4.481 3.359l-6.16 29.12c.003 2.243 2.242 5.04 5.043 5.04z"></path>
+      <path d="M350 235.2c-28.559 0-53.762 13.441-70 34.16h-76.16l11.762 110.32H280c16.238 20.719 42 34.16 70 34.16 28.559 0 53.762-13.441 70-34.16h64.398l11.762-110.32H420c-16.238-20.719-41.441-34.16-70-34.16z"></path>
+    </svg>
+  ),
   components: (
     <svg aria-hidden={true} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351.45 300.6">
       <path
@@ -596,6 +603,14 @@ export default {
       />
     </svg>
   ),
+  github: (
+    <svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <title>Github</title>
+      <path
+        d="m10.055 1.897c-4.5283 3.999e-4 -8.2003 3.6726-8.2003 8.2025 0 3.6233 2.35 6.6977 5.6092 7.7828 0.41036 0.07502 0.55981-0.17856 0.55981-0.39608 0-0.19486-0.00752-0.71047-0.011804-1.3947-2.2814 0.49546-2.7629-1.0997-2.7629-1.0997-0.37309-0.94761-0.9109-1.1993-0.9109-1.1993-0.7447-0.50855 0.056793-0.4986 0.056793-0.4986 0.82324 0.0579 1.2561 0.84525 1.2561 0.84525 0.73161 1.2532 1.9202 0.89148 2.3875 0.68151 0.074504-0.5297 0.28659-0.89183 0.52072-1.0968-1.8212-0.20745-3.7365-0.91075-3.7365-4.0537 0-0.89575 0.31985-1.6274 0.84452-2.2009-0.084638-0.20745-0.36616-1.0413 0.080394-2.1707 0 0 0.68854-0.22008 2.2555 0.84083 0.65405-0.18177 1.356-0.27232 2.0534-0.27585 0.69687 0.00357 1.3983 0.094083 2.0534 0.27585 1.5659-1.0609 2.2533-0.84083 2.2533-0.84083 0.44762 1.1294 0.16597 1.9632 0.08187 2.1707 0.52567 0.5735 0.84304 1.3052 0.84304 2.2009 0 3.151-1.9179 3.8449-3.7446 4.0478 0.29405 0.25326 0.55613 0.75331 0.55613 1.5187 0 1.0961-0.01028 1.9807-0.01028 2.2496 0 0.21953 0.14834 0.47466 0.56424 0.3946 3.2567-1.0871 5.6048-4.1586 5.6048-7.7813 0-4.5299-3.6727-8.2021-8.2025-8.2025z"
+      />
+    </svg>
+  ),
   helpers: (
     <svg aria-hidden={true} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.1 268.28">
       <path

dist/js/flatify.js

@@ -19,7 +19,7 @@ Search by Graphik Designz from the Noun Project
 Check by James Kocsis from the Noun Project
 Heart by BomSymbols from NounProject.com
 Share by shaurya from NounProject.com
-Coffee by Gregor Cresnar from NounProject.com
+Coffee by Adrien Coquet from NounProject.com
 
 ## Flaticon