<body>
	<div id="contentWrapper">
		<div id="content">
			<audio id="clickSound">
				<source src="http://mihailo.centarzatalente.com/sounds/click.mp3"></source>
				<source src="http://mihailo.centarzatalente.com/sounds/click.ogg"></source>
				Audio not supported.
			</audio>
			
			<audio id="clickSound2">
				<source src="http://mihailo.centarzatalente.com/sounds/clickUp.mp3"></source>
				<source src="http://mihailo.centarzatalente.com/sounds/clickUp.ogg"></source>
				Audio not supported.
			</audio>
		
			<span id="button">Button</span>
		</div>
	</div>
</body>
body{
	margin: 0 auto;
    padding: 0;
    font-family: 'Arimo', Quicksand_Book, Arial;
    font-size:14px;
    color:#333333;
    
	background: -webkit-radial-gradient(#F7F7F7, #CDCDCD);
    background: -o-radial-gradient(#F7F7F7, #CDCDCD);
    background: -moz-radial-gradient(#F7F7F7, #CDCDCD);
    background: radial-gradient(#F7F7F7, #CDCDCD);
	
	text-align:center;
}
a{
	text-decoration:none;
}
#contentWrapper{
    width: 90%;
	margin: 0 auto;
	text-align: center;
}
#content{
	text-align:center;
}

#button{
	text-align:center;
	margin:170px auto;
	padding: 20px 0px;
	display:block;
	height:30px;
	width:175px;
	
	cursor:pointer;
	font-size:25px;
	color:#F0F0F0;
	border-radius:10px;
	border-bottom:4px solid #0045A6;
	box-shadow: 6px 6px 6px #999;
	
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	
	background: -webkit-linear-gradient(#00C8F8, #0067F7);
    background: -o-linear-gradient(#00C8F8, #0067F7);
    background: -moz-linear-gradient(#00C8F8, #0067F7);
    background: linear-gradient(#00C8F8, #0067F7);
	
	-webkit-transition: background 0.05s linear;  
    -moz-transition: background 0.05s linear;  
    -o-transition: background 0.05s linear;  
    transition: background 0.05s linear;
	
	background-size:1px 200px;
	
	transition: all .05s linear;
}

#button:hover{
	background-position:100px;
}

#button:active {
	box-shadow: 2px 2px 2px #777;
	border-bottom:1px solid #0045A6;
	transform: translateY(3px);
}
$( document ).ready(function() {
	var audio = $("#clickSound")[0];
	var audio2 = $("#clickSound2")[0];
	$("#button").mousedown(function() {
	  audio2.play();
	});
	$("#button").mouseup(function() {
	  audio.play();
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js