We can remove the text on a HTML button by adding the text-indent css attribute on the button class. but this does not work in Internet Explorer 7.
Luckily, i have found a very simple way to solve the problem. Thanks Chris @ Remove Button Text in IE7. This is by adding the text-transform: capitalize in the css class.
.button {
text-indent: -9999px;
text-transform: capitalize;
}
Here is an example.
<html>
<head>
<style type="text/css">
.button {
text-indent: -9999px;
text-transform: capitalize;
}
</style>
</head>
<body>
<input class="text" type="text" />
<input class="button" type="submit" value="go" />
</body>
<html>
Done =)
Reference: Remove Button Text in IE7
Update @ 2011-09-12: You may need to use margin-left to show the button. ie.
.ie7 .button {
margin-left: 9999px;
text-indent: -9999px;
text-transform: capitalize;
}
Eureka! 