a button that says Amanda and when you click it, show a note that requests her attendance at our Passover seder and that she should RSVP by messaging Simon. Make it look unconventional. Use fade effects when the message appears. 

<html>
<head>
	<title>Passover Seder Invitation</title>
	
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
	
	<style>
		body {
			background-color: #FFC0CB;
		}
		.invite-container {
			margin-top: 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.btn-amanda {
			background-color: #FFFFE0;
			color: #8B0000;
			border: none;
			font-size: 3rem;
			font-weight: bold;
			letter-spacing: 0.5rem;
			margin-bottom: 30px;
			box-shadow: 0px 0px 10px #8B0000;
			transition: transform 0.5s, box-shadow 0.5s;
		}
		.btn-amanda:hover {
			transform: scale(1.2);
			box-shadow: 0px 0px 20px #8B0000;
		}
		.note {
			display: none;
			margin-top: 30px;
			background-color: #FFFFE0;
			color: #8B0000;
			font-size: 2rem;
			font-weight: bold;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px #8B0000;
			text-align: center;
		}
		.fade-effect {
			animation: fade-in 1s;
		}
		@keyframes fade-in {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="invite-container">
			<button class="btn-amanda" onclick="showNote()">Amanda</button>
			<div class="note" id="note">
				<p>Hello Amanda,</p>
				<p>You're invited to our Passover Seder on April 15th, 2022 at 6pm. Please RSVP by messaging Simon.</p>
			</div>
		</div>
	</div>

	
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
	
	<script>
		function showNote() {
			var note = document.getElementById("note");
			note.classList.add("fade-effect");
			note.style.display = "block";
		}
	</script>
</body>
</html>

A Passover Seder invitation webpage with an interactive button that displays a hidden note when clicked.