.site_button {
	width: 164px;
	height: 50px;
	display: flex;
	border-radius: 10px;
	border: 1px solid #fff;
	background: #090909;
	position: relative;
	overflow: hidden;
}

.site_button span {
	color: #fff;
	font-size: 16px;
	margin: auto;
}

/* .white_bg_btn .site_button {
    background: white;
    color: black;
} */
.white_bg_btn .site_button {
	background: white;
	background: linear-gradient(to right, rgba(9, 181, 181, .83) 50%, #fff 50%);
	color: black;
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all .5s ease-out;
}

.white_bg_btn .site_button span {
	color: black;
}

.site_button:hover {
	background-position: left bottom;
}

/* .site_button:hover span {
    color: black;
} */
.site_button {
	background: linear-gradient(to right, teal 50%, #090909 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all .5s ease-out;
}

@media all and (min-width: 320px) and (max-width: 767px) {
	.site_button {
		width: 126px;
		height: 44px;
	}
	
	.site_button span {
		font-size: 11px;
	}
}

@media all and (min-width: 768px) and (max-width: 980px) {
	.site_button {
		width: 151px;
		height: 43px;
	}
	
	.site_button span {
		font-size: 13px;
	}
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
	.site_button {
		width: 151px;
		height: 43px;
	}
	
	.site_button span {
		font-size: 13px;
	}
}

@media all and (min-width: 1025px) and (max-width: 1140px) {
	.site_button {
		width: 151px;
		height: 43px;
	}
	
	.site_button span {
		font-size: 13px;
	}
}

@media all and (min-width: 1141px) and (max-width: 1280px) {
	.site_button {
		width: 151px;
		height: 43px;
	}
	
	.site_button span {
		font-size: 13px;
	}
}

@media all and (min-width: 1281px) and (max-width: 1440px) {
	.site_button {
		width: 151px;
		height: 43px;
	}
	
	.site_button span {
		font-size: 13px;
	}
}

@media all and (min-width: 1441px) and (max-width: 1680px) {}

@media all and (min-width: 1681px) and (max-width: 1880px) {}