nikibah-test-package/src/MyButton.css

Demo component

root {
	--primary: #4285f4;
}
.btn {
	padding: 8px 20px;
	border-radius: 4px;
	outline: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.btn--outline {
	background-color: transparent;
	color: #000;
	padding: 8px 20px;
	transition: all 0.3s ease-out;
	cursor: pointer;
	border-radius: 4px;
}
/*Sizes: Wide, Large, Medium, Small*/
.btn--wide {
	padding: 12px 128px;
	font-size: 22px;
}
.btn--large {
	padding: 12px 64px;
	font-size: 20px;
}
.btn--medium {
	padding: 12px 32px;
	font-size: 18px;
}
.btn--small {
	padding: 12px 16px;
	font-size: 16px;
}
.btn--wide:hover,
.btn--large:hover,
.btn--medium:hover,
.btn--small:hover {
	transition: all 0.3s ease-out;
	background: #000;
	color: #fff;
}
.primary {
	background-color: #242424;
	color: #fff;
	border: none;
}
.black {
	background: #000000;
	color: #fff;
	border: none;
}
.red {
	background: #cc0000;
	color: #fff;
	border: none;
}
.primary-border {
	background: transparent;
	color: #000;
	border: 2px solid #242424;
}
.black-border {
	background: transparent;
	color: #000;
	border: 2px solid #000000;
}
.red-border {
	background: transparent;
	color: #000;
	border: 2px solid #cc0000;
}