cool new button

Author: linuxjava7

content/index.njk

@@ -56,14 +56,16 @@ const eleventyNavigation = {
         <p>Linux Desktop Environment</p>
         <p>GNOME is one of my main inspirations for UI and UX design, they do some really great stuff :)</p>
         <a class="btn dark" href="https://www.gnome.org/">
-          <svg width="1rem" height="1rem" viewBox="0 0 100 120" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
-            <path d="M 86.068,0 C 61.466,0 56.851,35.041 70.691,35.041 84.529,35.041 110.671,0 86.068,0 Z"></path>
-            <path d="M 45.217,30.699 C 52.586,31.149 60.671,2.577 46.821,4.374 32.976,6.171 37.845,30.249 45.217,30.699 Z"></path>
-            <path d="M 11.445,48.453 C 16.686,46.146 12.12,23.581 3.208,29.735 -5.7,35.89 6.204,50.759 11.445,48.453 Z"></path>
-            <path d="M 26.212,36.642 C 32.451,35.37 32.793,9.778 21.667,14.369 10.539,18.961 19.978,37.916 26.212,36.642 Z"></path>
-            <path d="m 58.791,93.913 c 1.107,8.454 -6.202,12.629 -13.36,7.179 C 22.644,83.743 83.16,75.088 79.171,51.386 75.86,31.712 15.495,37.769 8.621,68.553 3.968,89.374 27.774,118.26 52.614,118.26 c 12.22,0 26.315,-11.034 28.952,-25.012 C 83.58,82.589 57.867,86.86 58.791,93.913 Z"></path>
-          </svg>
-          Visit GNOME
+        	<span class="front">
+	          <svg width="1rem" height="1rem" viewBox="0 0 100 120" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M 86.068,0 C 61.466,0 56.851,35.041 70.691,35.041 84.529,35.041 110.671,0 86.068,0 Z"></path>
+	            <path d="M 45.217,30.699 C 52.586,31.149 60.671,2.577 46.821,4.374 32.976,6.171 37.845,30.249 45.217,30.699 Z"></path>
+	            <path d="M 11.445,48.453 C 16.686,46.146 12.12,23.581 3.208,29.735 -5.7,35.89 6.204,50.759 11.445,48.453 Z"></path>
+	            <path d="M 26.212,36.642 C 32.451,35.37 32.793,9.778 21.667,14.369 10.539,18.961 19.978,37.916 26.212,36.642 Z"></path>
+	            <path d="m 58.791,93.913 c 1.107,8.454 -6.202,12.629 -13.36,7.179 C 22.644,83.743 83.16,75.088 79.171,51.386 75.86,31.712 15.495,37.769 8.621,68.553 3.968,89.374 27.774,118.26 52.614,118.26 c 12.22,0 26.315,-11.034 28.952,-25.012 C 83.58,82.589 57.867,86.86 58.791,93.913 Z"></path>
+	          </svg>
+	          Visit GNOME
+					</span>
         </a>
       </div>
     </div>

css/index.css

@@ -308,7 +308,7 @@ header {
 	/* Component Variables */
 	--rounded-corner: 12px;
 	--btnround: 500px;
-	--btnsqr: 0.8rem;
+	--btnsqr: 0.9rem;
 
 	/* Font Settings */
 	font-family: Inter, sans-serif;
@@ -579,32 +579,32 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 
 /* Button styles for cards */
 .card .btn {
-	max-width: 12rem;
-	font-size: 80%;
-	border-radius: var(--btnsqr);
-	background-color: var(--accent-bg-color);
-	color: var(--accent-fg-color);
-	opacity: 1;
-	font-weight: 600;
-	font-variation-settings: "wght" 600;
-	padding: 0.6rem 1.5rem;
-	display: inline-block;
-	align-items: center;
-	gap: 0.5rem;
-	text-decoration: none;
-	transition: box-shadow 200ms var(--slickease);
-	margin: 0.3rem;
+	background: var(--view-switcher-accent);
 	border: none;
-	box-shadow: 0 0 0 0 var(--accent-bg-color);
-	min-width: 4rem;
-	vertical-align: middle;
-	text-align: center;
-	white-space: nowrap;
+	cursor: pointer;
+	outline-offset: 4px;
+	border-radius: var(--btnsqr);
+	max-width: fit-content;
 }
 
-.card .btn:hover {
-	box-shadow: 0 0 0 2px var(--accent-bg-color);
-	text-decoration: none;
+.btn:hover .front {
+	transform: translateY(-6px);
+}
+
+.btn:active .front {
+	transform: translateY(-2px);
+}
+
+.front {
+	font-size: 1.25rem;
+	background: var(--accent-bg-color);
+	color: white;
+	transform: translateY(-4px);
+	padding: 0.6rem 1.5rem;
+	border-radius: var(--btnsqr);
+	font-size: 80%;
+	display: inline-table;
+	transition: transform 200ms var(--slickease);
 }
 
 .card .btn svg {