html button特效，載入背景音樂
阿新 • • 發佈：2019-01-31
<!DOCTYPE html> <html> <head> <title>Mp3</title> <style> .player-button{ font-weight:bold; font-family:Verdana; background-color:deepskyblue; color:white; font-size:15; width:90; height:28; display: inline-block; border: 2 solid #B6B6B6; border-color: gainsboro gainsboro gainsboro gainsboro; vertical-align: top; transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none; border-color: deepskyblue; } .player-button:hover{ font-weight:bold; font-family:Verdana; background-color:deepskyblue; color:white; font-size:15; width:90; height:28; display: inline-block; border: 2 solid #B6B6B6; border-color: gainsboro gainsboro gainsboro gainsboro; vertical-align: top; transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none; border-color: deepskyblue; box-shadow:0 0 0.5em deepskyblue; -moz-box-shadow:0 0 0.5em deepskyblue; -webkit-box-shadow:0 0 0.5em deepskyblue; } </style> </head> <audio id="clickSound"> <source src="檔案地址(如./青花瓷.mp3)"> </audio> <button id="toggle" onclick="toggleSound()" class="player-button">Play</button> <script type="text/javascript"> function toggleSound(){ var music=document.getElementByIdx_x_x("clickSound"); var toffle=document.getElementByIdx_x_x("toggle"); if(music.paused){ music.play(); toggle.innerHTML="Pause "; } else{ music.pause(); toggle.innerHTML="Play"; } } </script> </html> </BODY> </HTML>