Help for CSS

<!DOCTYPE>
<html>

<body>

	<div>

		<button class = 'infoBtn' onclick = 'myInfo()'>Information</button>

	</div>

	<div class = 'vibeS' id = 'infobutto'>

	<p>

	Website created by , made with love in Denver, Colorado

	<br>
		<br>

		This website was created with accessability in mind. Click on any text to make the text bigger with a  maximum of 25px.

	</p>

	<p>


		</p>

		</div>

	</body>

	<style>

		.vibeS {

			font-size: 25px;
			font-family: sans-serif;
			display: none;

		}

		.infoBtn {

			border-radius: 25px;
			color: black;
			background-color: white;
			border: 2px solid black;
			padding: 16px 26px;
			font-family: sans-serif;
			font-size: 25;
			cursor: pointer;

		}

		.infoBTN:hover {

			background-color: black;
			color: white;
		}

		.vibeS {

			animation-name: slideIn;
			animation-duration: 4s;

		}

		.infoBtn:hover @keyframes slideIn {

			0% {backface-visibility:hidden}

			100% {backface-visibility: visible}
		}

	</style>

	<script>

	function myInfo() {

		document.getElementsByClassName('.vibeS').

	}

	</script>

</html>