Fix Clear button hover effect by giving the backgroundColor

Author: ujjwaldubey1

client/styles/components/_console.scss

@@ -88,16 +88,25 @@
 	@include themify() {
 		@extend %link;
 		color: getThemifyVariable('secondary-text-color');
-		&:hover {
-			color: getThemifyVariable('heavy-text-color');
-		}
+	
 	}
 	background: transparent;
 	border: none;
 	padding-right: #{math.div(10, $base-font-size)}rem;
 	.preview-console--collapsed & {
 		display: none;
 	}
+			  transition: background-color 0.3s ease,
+			  color 0.3s ease,
+			  box-shadow 0.3s ease,
+			  transform 0.3s ease,
+			  border-color 0.3s ease;
+}
+.light .preview-console__clear:hover {
+	background: #ed225d;
+	color: white;
+	border-radius: 2px;
+	transform: scale(1.1) translateY(-2px);
 }
 
 .preview-console__body {