LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html { height: 100%; }
body { min-height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
button { 
  border-radius: 50%; 
  width: 200px;
  height: 200px;
  border: none;
  color: white;
  font-family: Avenir, Arial, sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  background: red;
  text-shadow: 0 3px 1px rgba(122,17,8,.8);
  box-shadow: 0 8px 0 rgb(183,9,0), 
    0 15px 20px rgba(0,0,0,.35);
  text-transform: uppercase;
  -webkit-transition: .4s all ease-in;
  transition: .4s all ease-in;
  outline: none; 
  cursor: pointer;
  text-align: center;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
button span { position: relative; }
/* fix for IE 11 (and IE8+, although the earlier versions are harder to address) stupidly moving the inner button text on click */
.pressed { 
  padding-top: 3px;
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  box-shadow: 0 4px 0 rgb(183,0,0),
    0 8px 6px rgba(0,0,0,.45);
}
JS
var contextClass = (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.oAudioContext || window.msAudioContext);
var dance = document.getElementById("everybodydance");
if (contextClass) {
  var context = new contextClass();
} else {
  onError;
}
var request = new XMLHttpRequest();
request.open('GET', "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gonna-make-you-sweat.mp3", true);
request.responseType = 'arraybuffer';
request.onload = function() {
 context.decodeAudioData(request.response, function(theBuffer) {
  buffer = theBuffer;
  }, onError);
}
request.send();

function onError() { console.log("Bad browser! No Web Audio API for you"); }

function unpress() { dance.classList.remove("pressed"); }

function playSound() {
 dance.classList.add("pressed");
  var source = context.createBufferSource();
  source.buffer = buffer;
 source.connect(context.destination);
  source.start(0);
  var delay = 2000;
  setTimeout(unpress,delay);
}
dance.addEventListener('click', function(event) { playSound(); });
Host Instantly Drag and Drop Website Builder

 

Description

Heavily styled button element that uses flexbox for alignment, transitions for visual behaviour and Web Audio API for triggered sound. A full explanatory blog article
Term
Mon, 11/27/2017 - 21:48

Related Codes

Pen ID
Pen ID
Pen ID