🎨

src/client/components/ui/button.vue

@@ -1,6 +1,6 @@
 <template>
 <button v-if="!link" class="bghgjjyj _button"
-	:class="{ inline, primary, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:type="type"
 	@click="$emit('click', $event)"
 	@mousedown="onMousedown"
@@ -11,7 +11,7 @@
 	</div>
 </button>
 <MkA v-else class="bghgjjyj _button"
-	:class="{ inline, primary, danger, rounded, full }"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:to="to"
 	@mousedown="onMousedown"
 >
@@ -36,6 +36,11 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		gradate: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		rounded: {
 			type: Boolean,
 			required: false,
@@ -137,8 +142,8 @@ export default defineComponent({
 	padding: 8px 14px;
 	text-align: center;
 	font-weight: normal;
-	font-size: 0.9em;
-	line-height: 24px;
+	font-size: 0.8em;
+	line-height: 22px;
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
@@ -177,6 +182,20 @@ export default defineComponent({
 		}
 	}
 
+	&.gradate {
+		font-weight: bold;
+		color: var(--fgOnAccent) !important;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+		&:not(:disabled):hover {
+			background: var(--X8);
+		}
+
+		&:not(:disabled):active {
+			background: var(--X8);
+		}
+	}
+
 	&.danger {
 		color: #ff2a2a;