Make your website buttons more lively with smooth hover animations and a fun click sound. Fully customizable, responsive and free to use for your projects or blogs.

Explanation of Code Functions:
    HTML Structure:
  • A simple <button> element for user interaction.
  • An <audio> element to load the click sound.

    CSS Animations and Styles:
  • On hover, the button changes background color and slightly increases in size using transform: scale().
  • Added smooth transition effects for color and scale properties.

    JavaScript Functionality:
  • When the button is clicked, the JavaScript function triggers and plays the assigned audio clip.


<audio id="clickSound" controls>
  <source src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

Download code