diff --git a/src/components/hover/_fillup-on-hover.less b/src/components/hover/_fillup-on-hover.less
new file mode 100644
index 000000000..8c0fe3235
--- /dev/null
+++ b/src/components/hover/_fillup-on-hover.less
@@ -0,0 +1,34 @@
+
+.fillUpBtn {
+	margin: 10px auto;
+	border: #dae6f2;
+	position: relative;
+	border-radius: 10px;
+	padding: 10px 35px;
+	font-size: 35px;
+	&::before {
+		transition: all 0.85s cubic-bezier(0.68,-0.55,0.265,1.55);
+		content: '';
+		height: 100%;
+		width: 50%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		border-radius: 5px;
+		border: #060606;
+		background: #a2ccf6;
+	}
+	/* fillUpBtnText is span class within button */
+	.fillUpBtnText {
+		font-family: Georgia, 'Times New Roman', Times, serif;
+		mix-blend-mode: multiply;
+		color: #1ba5a5;
+	}
+	&:hover {
+		&::before {
+			width: 100%;
+			background: #124e89;
+			border-radius: 5px;
+		}
+	}
+}
\ No newline at end of file