Play /Pause Button

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

.bt {
width:125px;
height:125px;
border-radius:50%;
outline:none;
background-color:red;
color:white;
font-size:15px;
font-family:arial;
font-weight:900;
border:20px solid;
box-shadow:4px 4px 5px black;
margin:100px;
cursor:pointer;
}

#bt_style {
transform:skew(-15deg);
display:inline-block;
}

</style>
</head>
<body>


<button id='bt' onmouseup='up()' onmousedown='down()' class='bt'>
<span id='bt_style'>Play</span>
</button>


<script>
i=0;

function down(){
bt.style.boxShadow="1px 1px 1px black";
}

function up(){
bt.style.boxShadow="4px 4px 5px black";
}

bt.onclick=function(){
if(i==0){i=1;
bt_style.innerHTML='Pause';
}else if(i==1){i=0;
bt_style.innerHTML='Play';
}
}


</script>
</body>
</html>