add sort & view for species

assets/css/components/_buttons.scss

@@ -1,4 +1,4 @@
-
+@use "../abstracts/mixins.scss" as *;
 
 .btn--solid{
     font-weight: 600;
@@ -28,3 +28,74 @@
 }
 
 
+.btn-action {
+    border: 1px solid var(--color-txt-light);
+    height: calc(var(--unit)*1.25);
+    background-color: var(--white);
+
+    border-radius: var(--radius-btn);
+    cursor: pointer;
+
+    a{
+        display: flex;
+        align-items: center;
+        gap: 1ch;
+        text-decoration: none;
+        color: var(--color-txt);
+        padding: 0 1ch;
+    }
+  
+    .icon{
+        @include icon(20px);
+       
+    }
+    .text{
+        font-size: var(--fs-small);
+        font-weight: 500;
+    }
+    &:hover{
+        border-color: var(--color-txt);
+    }
+  
+}  
+
+label.btn-action{
+    display: inline-flex;
+    align-items: center;
+    gap: 1ch;
+    text-decoration: none;
+    color: var(--color-txt);
+    padding: 0 1ch;
+    .text{
+            font-weight: 700;
+    }
+}
+
+
+
+
+
+.link-with-arrow{
+    a{
+        text-decoration: none;
+        color: var(--color-txt);
+        font-size: var(--fs-small);
+        &::after{
+            content: "→";
+            font-family: var(--font-title);
+            font-size: 0.9em;
+            position: relative;
+            left: 1.5ch;
+            transition: left .4s ease-in-out;
+            text-decoration: 1px underline transparent;
+        }
+    }
+    &:hover{
+        opacity: 0.8;
+   
+        a::after{
+            left: 2.5ch;
+        }
+
+    }
+}