Button (with Sound Effect)
HTML
<div class="button">Click Me</div>
CSS
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #E0EAFC;
background: linear-gradient(to left, #E0EAFC , #CFDEF3);
font-family: 'Oswald', sans-serif;
}
.button {
text-align: center;
height: 65px;
width: 185px;
line-height: 65px;
cursor: pointer;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 4px;
color: #F0F0F0;
border-radius: 10px;
border-bottom: 4px solid #c0392b;
box-shadow: 6px 6px 6px #999;
user-select: none;
background: #e74c3c;
transition: background 0.05s linear;
transition: all .05s linear;
}
.button:active {
box-shadow: 2px 2px 2px #777;
border-bottom: 1px solid #c0392b;
transform: translateY(3px);
}
JAVASCRIPT
$(document).ready(function() {
var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/click.mp3');
var audio2 = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/clickUp.mp3')
$(".button").mousedown(function() {
audio2.load();
audio2.play();
});
$(".button").mouseup(function() {
audio.load();
audio.play();
});
});
