@@ -4,11 +4,12 @@
 	background-color: transparent;
 	padding: 15px 25px;
 	cursor: pointer;
+  box-sizing: content-box;
 
 	&_outline {
 		border-radius: 15px;
-		border: 1px solid white;
-		color: white;
+		border: 0.15rem solid var(--new-ui-text-color);
+		color: var(--new-ui-text-color);
 		font-weight: 600;
 		transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
 		font-size: 15px;
@@ -44,14 +45,14 @@
 
 	&_primary {
 		background-color: var(--air-color);
-		color: white;
+		color: var(--new-ui-text-color);
 		border-radius: 12px;
 		font-weight: 500;
 		font-size: 15px;
 		transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
 		&:hover {
 			background-color: var(--text-color-purple);
-			color: white;
+			color: var(--new-ui-text-color);
 		}
 	}
 }
@@ -6,16 +6,42 @@
 	display: flex;
 	text-align: left;
 	flex-direction: column;
-	transition: all 0.6s ease-in-out;
-	&:hover {
+	position: relative;
+  &__btn{
+    transition: all 0.8s ease-in-out !important;
+  }
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+
+    visibility: hidden;
+		left: 0;
+		width: 100%;
+		height: 100%;
 		border: 2px solid var(--air-color);
-		box-sizing: border-box;
+		border-radius: 15px;
+		transition: all 0.6s ease-in-out;
+		opacity: 0;
+	}
+	&:hover {
+		&::before {
+			opacity: 1;
+      visibility: visible;
+		}
+		.tarif__btn {
+			background-color: var(--air-color);
+			color: white;
+			border: unset;
+		}
 	}
 	&__header {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		margin-bottom: 45px;
+    position: relative;
+    z-index: 1;
 	}
 
 	&__badge {
@@ -40,6 +66,8 @@
 		font-size: 25px;
 		letter-spacing: -2%;
 		margin-bottom: 8px;
+    position: relative;
+    z-index: 1;
 	}
 
 	&__list {
@@ -49,11 +77,15 @@
 		padding-left: 20px;
 		gap: 4px;
 		margin-bottom: 45px;
+    position: relative;
+    z-index: 1;
 	}
 
 	&__btn {
 		border-color: var(--air-color);
 		color: var(--air-color);
+    position: relative;
+    z-index: 1;
 	}
 }
 
@@ -15,6 +15,7 @@ interface IOfferProps extends IOffer {
 }
 
 const Offer: React.FC<IOfferProps> = ({ pickOffer, uid, tokens_per_plan, price, points, pay }) => {
+
 	return (
 		<div className={c(styles.tarif)} onClick={() => pickOffer(uid)}>
 			<div className={styles.tarif__header}>
@@ -37,7 +38,7 @@ const Offer: React.FC<IOfferProps> = ({ pickOffer, uid, tokens_per_plan, price,
 
 			<p className={styles.tarif__price}>{commaSeparated(parseInt(price) ?? 0)}₽</p>
 
-			<CommonButton onClick={() => pay(uid)} variant={'outline'}>
+			<CommonButton className={styles.tarif__btn} onClick={() => pay(uid)} variant={'outline'}>
 				Оплатить
 			</CommonButton>
 		</div>