Back
Experience an enchanting musical adventure with a button inspired by the melodious flute that plays a unique note with every click.
<div class="symphony-section">
<button aria-label="Flute Play Button" onclick="playSymphony()" class="symphony-flute-button">
<span class="flute-note">♪</span>
</button>
</div>
We use a <div> to center the button and a <button> element for interactivity, complete with an aria-label for accessibility.
const notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
let currentNote = 0;
function playSymphony() {
const fluteButton = document.querySelector('.symphony-flute-button');
currentNote = (currentNote + 1) % notes.length;
fluteButton.querySelector('.flute-note').textContent = notes[currentNote];
fluteButton.style.transform = `translateY(${Math.random() * 10 - 5}px)`;
new Audio(`https://www.soundjay.com/button/sounds/button-${notes[currentNote]}.mp3`).play();
}
Our script defines musical notes and uses playSymphony() to cycle through them, visually updating the button and playing a sound.
.symphony-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.symphony-flute-button {
padding: 20px 40px;
border: 2px solid #6a5acd;
border-radius: 25px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #6a5acd;
font-size: 24px;
font-weight: bold;
transition: transform 0.3s;
cursor: pointer;
}
.symphony-flute-button:focus {
outline: none;
box-shadow: 0 0 10px #6a5acd;
}
Our styles ensure the button is sleek, reactive, and maintains a clear focus state.
With these steps, we've constructed a delightful symphony gun-button that not only achieves elegance but also orchestrates an auditory treat.<div class="symphony-section">
<button aria-label="Flute Play Button" onclick="playSymphony()" class="symphony-flute-button">
<span class="flute-note">♪</span>
</button>
</div>
<script>
const notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
let currentNote = 0;
function playSymphony() {
const fluteButton = document.querySelector('.symphony-flute-button');
currentNote = (currentNote + 1) % notes.length;
fluteButton.querySelector('.flute-note').textContent = notes[currentNote];
fluteButton.style.transform = `translateY(${Math.random() * 10 - 5}px)`;
new Audio(`https://www.soundjay.com/button/sounds/button-${notes[currentNote]}.mp3`).play();
}
</script>
<style>
.symphony-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.symphony-flute-button {
padding: 20px 40px;
border: 2px solid #6a5acd;
border-radius: 25px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #6a5acd;
font-size: 24px;
font-weight: bold;
transition: transform 0.3s;
cursor: pointer;
}
.symphony-flute-button:focus {
outline: none;
box-shadow: 0 0 10px #6a5acd;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!