How to Style a Link

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


a {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-decoration:none;
border:5px solid;
width:160px;
height:160px;
display: flex;
justify-content: center;
align-items: center;
font-family:arial black;
font-size:25px;
background-color:red;
color:white;
border-radius:10px;
box-shadow:5px 5px 4px black;
}


</style>
</head>
<body>


<a id='bt' onmouseup='up()' onmousedown='down()' href='' >C/DRIVE</a>


<script>


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

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


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