If you are asking this in regards to web-based solution, then using jQuery would make this fairly easy by switching the button's CSS classes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Buttons</title>
<style type="text/css">
.buttons
{
padding: 5px;
margin: 10px;
}
.thick
{
border: 4px solid blue;
}
.thin
{
border: 1px solid black;
}
</style>
</head>
<body>
<input id="" type="button" value="Button 1" />
<input id="" type="button" value="Button 2" />
<input id="" type="button" value="Button 3" />
<input id="" type="button" value="Button 4" />
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//Add base classes to all buttons on page
jQuery(function($) {
$(":button").addClass("buttons thin")
});
//Toggle thick/thin classes when clicked
$(function() {
$(":button").click(function() {
if ($(this).hasClass("thin")) {
$(this).removeClass("thin").addClass("thick");
}
else {
$(this).removeClass("thick").addClass("thin");
}
});
});
</script>
</body>
</html>
Submit an article or tip