Mys2010 on Codepen

Memasang Kode Sound Board
Login ke akun blog klik tombol blog baru,
buat satubuah link baru  kemudian beri nama sesuai fungsi, 
klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template   
edit background warna sesuai keinginan lik pratinjau untuk melihat hasil dan klik simpan selesai

Penerapan kode : klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini,  pastekan kedalam  Entri halaman baru HTML  dan  klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;} 
body {
background:#000;}  
@import url(http://fonts.googleapis.com/css?family=Oswald);
html,body{height:100%} 
body{
  text-align:center;
  background: #111  url() no-repeat;
  background-size:cover
}
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Oswald', sans-serif;
  font-size:13px;
  color:#ddd
}
.buttons a {
  position: relative;
  display: inline-block;
  padding: 40px 0;
  color: #fff;
  width:100px;
  height:100px;
  margin-top:90px;
  box-sizing:border-box;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 14px 14px 14px 14px #000;
  background-color: rgba(160, 44, 163, 0.5);
  box-shadow:0 -4px 0 rgba(0,0,0,0.4) inset;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  transition:background-color 0.3s
}
.buttons a:hover {
  background-color: rgba(120,120,120,0.6);
}
.buttons a:active, a:focus {
 background-color: rgba(150,150,150,0.8);
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
 transition:all 0.1s
}
audio{
  display:none
}
</style> 

<div class="buttons">
<h1>SOUD</h1> 
<a href="#" data-fx="hello-m2010">HELLO M2010</a> 
<a href="#" data-fx="becareful">CAREFUL</a> 
<a href="#" data-fx="save-m2010">THREAT</a><br> 
<a href="#" data-fx="cibeber-m2010">CIBEBER</a> 
<a href="#" data-fx="california-m2010">CALIFORNIA</a>
<a href="#" data-fx="xmast-m2010">XMAST</a>
<a href="#" data-fx="wdding-m2010">WEDDING</a> 
</div>

<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script>// Sounds from myinstants.com
$('.buttons a').on('click',function(e){
  e.preventDefault();
  $('audio').remove();
    var fx = $(this).attr('data-fx');
  $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="http://www.myinstants.com/media/sounds/'+fx+'.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
    }); 
</script> 

Sound by. Myinstants
Design code is edited by. M-2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload  Sound Board Hover