initial

static/assets/scss/volt/components/_buttons.scss

@@ -0,0 +1,86 @@
+/*
+* = Buttons
+*/
+
+.btn {
+    &.btn-circle {
+        border-radius: $circle-radius;
+    }
+	&.btn-md{
+        padding: 0.65rem 1.25rem;
+    }
+    &.btn-xs{
+        padding: .2rem 0.35rem;
+        font-size: 0.55rem;
+        box-shadow: none;
+    }
+    &.large-form-btn{
+        padding: 1.2rem 1rem;
+    }
+    &.dashed-outline {
+        border-style: dashed;
+    }
+}
+
+
+.btn-icon-only {
+    width: 2.575rem;
+    height: 2.575rem;
+    padding: 0;
+    @include display-flex();
+    @include justify-content(center);
+    @include align-items(center);
+
+    &.btn-xs {
+        width: 1.7rem;
+        height: 1.7rem;
+    }
+    &.btn-sm {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+.btn-upgrade-pro {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    width: 190px;
+
+    @include media-breakpoint-up(md) {
+        left: 35px;
+    }
+}
+
+// Fix for darken background color
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+        &:hover{
+           background-color:  darken( $value, 5% );
+           border-color: darken( $value, 5% );
+        }
+    }   
+}
+
+// Brand (social) buttons 
+@each $color, $value in $brand-colors {
+    .btn-#{$color} {
+        @include button-variant($value, $value);
+
+		&.btn-link {
+			color: $value;
+			background: transparent;
+			box-shadow: none;
+            border:0;
+            border-style: none;
+			&:hover,
+			&:focus,
+			&.active {
+                background-color: transparent !important;
+                box-shadow: none;
+                border: 0;
+				color: $value;
+			}
+		}
+    }
+}