Jak zrobić kwadratowy przycisk

Question

Mam przycisku na mojej stronie i chcę, aby to kwadrat:

Jak zrobić zrobić kwadratowego przycisku i sprawiają, że nadal działa jak przycisk tak zmienia się trochę gdy jest przewijać nad nim

tutaj jest mój przykład: zauważ, że przycisk nie można kliknąć na

http://jsfiddle.net/HrUWm/

oto co próbowałem (co css będzie to działa?):

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

Answer 1

to zrobi pracę:

.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

Przykład: 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; 
} 

Kluczem kawałek jest selektory spełniające :active i :hover stany przycisku, aby umożliwić inny styl mają być zastosowane.

Zobacz także: The user action pseudo-classes :hover, :active, and :focus

Answer 3

Opcja używam teraz (używam angularjs & skrypty Bootstrap)

HTML:

<a href="#!login" class="btn">Log In</a> 

CSS:

padding: 40px 0px 40px 0px; 
text-decoration: none; 
width: 250px !important; 
height: 250px !important;