ReactMarkap/src/assets/scss/elements/_buttons.scss

.custom-btn {
	font-family: $base-font-family;
	font-weight: 400;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	border-radius: 4px;
	border: 1px solid transparent;
	transition: background-color .225s ease,
				border-color .225s ease,
				color .225s ease;

	&--blue {
		color: #ffffff;
		background-color: $primary-blue;
		border-color: $primary-blue;

		&:hover,
		&:active {
			background-color: darken($primary-blue, 5%);
			border-color: darken($primary-blue, 5%);
		}
	}

	&--border-gray {
		color: #999999;
		border-color: #a8a2a2;

		&:hover,
		&:active {
			color: #ffffff;
			background-color: #a8a2a2;
		}
	}

	&--border-blue {
		color: #7388ff;
		border-color: #7388ff;

		&:hover,
		&:active {
			color: #ffffff;
			background-color: #7388ff;
		}
	}
}