css - How to make a square button

Question

I have a button on my website and I want to make it square:

How do a make a square button and make it still act like a button so it changes a little bit when i scroll over it

here is my example: note that the button can't be clicked on

http://jsfiddle.net/HrUWm/

(what css will make this work?) here is what i tried:

<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue;  background-color: lightBlue;}

Answer 1

This will do the work:

.butt {
   border: 1px outset blue;
   background-color: lightBlue;
   height:50px;
   width:50px;
   cursor:pointer;
}

.butt:hover {
   background-color: blue;
   color:white;
}

http://jsfiddle.net/J8zwC/