first commit

wp-content/themes/ostal_WP/sass/05-components/_buttons.scss

@@ -0,0 +1,89 @@
+@use "../01-base/typography" as *;
+@use "../01-base/breakpoints" as *;
+@use "../01-base/colors" as *;
+
+@mixin button-primary($bg) {
+    background: $bg;
+    &:hover {
+      background:darken($bg,8%);
+      transition: all 0.3s ease;
+    }
+    &:active {
+      background:darken($bg,25%);
+    } 
+}
+
+@mixin button-secondary($bg) {
+    background: $bg;
+    &:hover {
+        background:darken($bg,8%);
+        transition: all 0.3s ease;
+    }
+    &:active {
+        background:darken($bg,25%);
+    } 
+}
+
+@mixin button-tertiary($bg) {
+    background: $bg;
+    &:hover {
+        background:darken($bg,8%);
+        transition: all 0.3s ease;
+    }
+    &:active {
+        background:darken($bg,25%);
+    } 
+}
+
+%btn {
+    @include font-primary;
+    font-weight: 400;
+	display: block;
+	padding: 15px 68px;
+	border-radius: 7px;
+	font-size: 1.6rem;
+    text-transform: uppercase;
+    max-width: fit-content;
+    @include responsive(desktop){
+        padding: 15px 68px;
+        font-size: 1.6rem;
+    }
+}
+
+.btn-primary, a.btn-primary {
+	@extend %btn;
+    background-color: $accent-color;
+    color: $white-color!important;
+    border: 2px solid $accent-color;
+    transition: all 0.3s ease;    
+    &:hover{
+        background-color: darken($accent-color, 8%);
+        border: 2px solid darken($accent-color, 8%);
+    }
+}
+.btn-secondary, a.btn-secondary {
+	@extend %btn;
+    background-color: $dark-color;
+    color: $accent-color;
+    border: 2px solid $white-color;
+    transition: all 0.3s ease;
+    &:hover{
+        background-color: darken($dark-color, 8%);
+        border: 2px solid $accent-color;
+    }
+}
+
+.wp-block-button{
+    &__link, a{
+        @extend %btn;
+        background-color: $accent-color!important;
+        color: $white-color!important;
+        border: 2px solid $accent-color!important;
+    }
+}
+
+.btn-link, a.btn-link {
+    font-size: 1.6rem;
+    color: $dark-color;
+    text-decoration: underline;
+}