I am trying to use css to shorten button text for use in hand-held devices. The demo code below illustrates the shortened text in the link but I can't get the same behavior for the submit button. I thought there may be a way to accomplish this with php. Any help would be greatly appreciated.

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>

<?php
if (isset($_POST['lastname'])) {
print("Last name = ". $_POST['lastname']);
}
?>

<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<br>
<form action="demomain.php" method="post">
Enter lastname: <input type="text" name="lastname">
<input type="submit" name="submit" class="button-type" value="Submit<span class=&quot;short&quot;> Name</span>"><br>
<br>
<a href="testpage.php" class="button-type">Go to test<span class="short"> page from form</span></a>
</form>

</body>
</html>

.button-type {
type: button;
border: 1px solid black;
padding: 2px 5px;
background-image: linear-gradient(to bottom, #FAFAFA, #C1C1C1);
text-decoration: none;
}
.short {
display: none;
}

<!DOCTYPE html>

<html>
<body>

This is the test page.

</body>
</html>