Wie man ein Quadrat-Taste machen

Question

ich eine Taste auf meiner Website und ich möchte es Platz machen:

Wie ein ein Quadrat-Taste machen und es immer noch wie ein Knopf handeln zu machen, so dass es ein wenig ändert, wenn i bewege dich über sie

hier ist mein Beispiel: beachten sie, dass die Schaltfläche nicht auf

angeklickt werden kann

http://jsfiddle.net/HrUWm/

hier ist, was ich versucht (was CSS werden diese Arbeit machen?):

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

Answer 1

Diese Arbeit machen wird:

.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

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

Das Kernstück ist die Selektoren die :active und :hover Zustände der Taste übereinstimmt, eine andere Art angewendet werden können.

Siehe auch: The user action pseudo-classes :hover, :active, and :focus

Answer 3

Eine Option Ich benutze jetzt (ich verwende AngularJS & Bootstrap-Skripte)

HTML:

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

CSS:

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