base

assets/css/components/_buttons.scss

@@ -0,0 +1,101 @@
+button{
+    cursor: pointer;
+    font-family: var(--font);
+    font-size: var(--fons-normal);
+    color: var(--color-txt);
+    &:hover{
+        color: var(--grey-100);
+    }
+
+    a{
+        text-decoration: none;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+button:disabled{
+    cursor: auto;
+
+}
+
+
+.btn__default{
+
+    
+    --size: calc(var(--h-block) - 8px);
+    font-size: var(--fs-normal);
+    font-weight: var(--fw-normal);
+    height: var(--size);
+    padding-right: 1.5ch;
+
+    position: relative;
+
+
+    display: flex;
+    align-items: center;
+    gap: 0ch;
+    // padding-right: 0.5ch;
+    color: var(--color-accent);
+    font-weight: var(--fw-medium);
+    text-decoration: none;
+
+    cursor: pointer;
+
+
+    .icon, .txt{ z-index: 10; }
+
+    .icon{
+        width: var(--size);
+        height: var(--size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-bg);
+        text-align: center;
+
+        svg{
+            fill: var(--color-bg);
+            width: 80%;
+        }
+    }
+
+    .txt{
+        font-family: var(--font-title);
+        color: var(--color-accent);
+        font-size: var(--fs-normal);
+        font-weight: var(--fw-bold);
+        padding-left: 1ch;
+    }
+
+    &::after{
+        content: '';
+        display: block;
+        background-color: var(--color-accent);
+        border-radius: calc(var(--size)/2);
+        width: var(--size);
+        height: var(--size);
+        position: absolute; 
+        left: 0;
+        z-index: 0;
+        transition: width .2s
+    }
+
+    &:hover{
+        // 
+        .txt{
+            color: var(--color-bg);
+                        display: block;
+                    }
+        &::after{
+            width: 100%;
+        }
+    }
+
+    
+
+
+
+   
+}
+