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/

Answer 2

Example: http://jsfiddle.net/HrUWm/7/

.btn{
   border: 1px solid #ddd;
   background-color: #f0f0f0;
   padding: 4px 12px;

    -o-transition: background-color .2s ease-in; 
    -moz-transition: background-color .2s ease-in;
    -webkit-transition: background-color .2s ease-in; 
    transition: background-color .2s ease-in; 
}

.btn:hover {
    background-color: #e5e5e5;    
}

.btn:active {
    background-color: #ccc;
}

The key piece is the selectors matching the :active and :hover states of the button, to allow a different style to be applied.

See also: The user action pseudo-classes :hover, :active, and :focus