html 音乐播放按钮,HTML5 按钮挤压动效+音乐播放

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Orbitron);

.center {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

* {

font-family: 'Orbitron', sans-serif;

}

body {

background-color: #333;

}

.button {

cursor: pointer;

text-transform: uppercase;

outline: none;

border: 5px solid teal;

background-color: darkblue;

color: white;

font-size: 2em;

padding: 0.75em 1em 0.5em;

text-shadow: 0 5px 5px black;

box-shadow: 0 0 0.25em black;

}

.button:after {

content: "REAL GOOD";

width: 100%;

position: absolute;

top: 90%;

left: 0;

font-size: 0.75em;

opacity: 0;

text-shadow: 0 0 0.75em black;

}

.button,

.button:after {

-webkit-transition: all 0.15s;

transition: all 0.15s;

}

.button:active {

box-shadow: 0 0 0.75em black;

text-shadow: 0 0 5px black;

-webkit-transform: scale(0.9) translateX(-120px) translateY(-45px);

-ms-transform: scale(0.9) translateX(-120px) translateY(-45px);

transform: scale(0.9) translateX(-120px) translateY(-45px);

}

.button:active:after {

top: 125%;

opacity: 1;

}

audio {

display: hidden;

}