Под любую тематику можно поставить заданный звук, что качается кнопок, то здесь сделаем звуковое сопровождение клика. Когда вы наводите на кнопку, то происходит эффект смены палитры цвета, только стоит произвести клик, как появится звук. Для этого изначально ставим в низ сайта или на страницы скрипт, где будет ссылка на звучание, которую самостоятельно меняем.
Также можно поставить различные шумы, где в этом материале звуковые эффекты при клике на ссылку вы можете скачать такие разные звуки и узнать, как можно выставить отдельный звук под отдельную ссылку.
Здесь идет такой дизайн, где при наведение меняется оттенок, также при клике он меняться и плюс сопровождается звуком.
HTML
Код
<script>
var bleep = new Audio();
bleep.src = 'http://zornet.ru/ABVUN/Anisa/oops.mp3';
</script>
<nav id="zodsamolksa" style="text-align: center">
<a href="#" onmousedown="bleep.play()">Главная</a>
<a href="#" onmousedown="bleep.play()">About Us</a>
<a href="#" onmousedown="bleep.play()">Services</a>
<a href="#" onmousedown="bleep.play()">Contact</a>
</nav>
CSS
Код
nav#zodsamolksa{ margin-top: 23px; }
nav#zodsamolksa > a {
background: #14507d;
color: #efeded;
padding: 15px;
text-decoration: none;
border-radius: 100px;
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #f3eeee;
box-shadow: 0px 1px 16px 4px rgba(39, 37, 37, 0.31), 1px 1px 12px 1px rgba(0, 0, 0, 0.7);
}
nav#zodsamolksa > a:hover{ background: #10962e; }
nav#zodsamolksa > a:active{ background: #08400a; }
PS - на demo странице идет немного другой стиль дизайна, здесь представлен как на изображение.
Демонстрация
