<!DOCTYPE html>
<html>
<body>
<style>
.mesas input {background:#00FF00;color:#000000;margin:2px;padding:24px}
.mesas input:hover {background:#00FF00;outline:none;transition:all .4s}
.mesas input:focus {background:#FF0000;outline:none;transition:all .4s}
</style>
<form class="mesas">
<input type="button" value="Mesa 1" onclick="javascript:this.focus()">
<input type="button" value="Mesa 2" onclick="javascript:this.focus()">
<input type="button" value="Mesa 3" onclick="javascript:this.focus()">
<input type="button" value="Mesa 4" onclick="javascript:this.focus()">
<br>
<input type="button" value="Mesa 5" onclick="javascript:this.focus()">
<input type="button" value="Mesa 6" onclick="javascript:this.focus()">
<input type="button" value="Mesa 7" onclick="javascript:this.focus()">
<input type="button" value="Mesa 8" onclick="javascript:this.focus()">
</form>
</body>
</html>
Crear cuenta
