Come fare un pulsante quadrato

Question

Ho un pulsante sul mio sito e voglio renderlo piazza:

Come un make un pulsante quadrato e renderlo ancora agire come un pulsante in modo cambia un po 'quando ho scorrere su di esso

qui è il mio esempio: si noti che il pulsante non può essere cliccato su

http://jsfiddle.net/HrUWm/

ecco quello che ho provato (cosa css farà questo lavoro?):

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

Answer 1

Questo farà il lavoro:

.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

Esempio: 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; 
} 

Il pezzo chiave è la selettori corrispondenti ai :active e :hover stati del tasto, per consentire uno stile diverso da applicare.

Consulta anche: The user action pseudo-classes :hover, :active, and :focus

Answer 3

Un'opzione sto usando ora (sto usando AngularJS & script di 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;