如何使一個方形按鈕

Question

我有我的網站上的按鈕，我希望把它方：

如何做一個讓一個方形按鈕，使其仍然像一個按鈕，它改變一點點，當我在滾動它

這裏是我的例子：注意，按鈕不能被點擊

http://jsfiddle.net/HrUWm/

這裏是我試過（什麼CSS都使這項工作？）：

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

Answer 1

這將做的工作：

.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

實施例：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; 
} 

的關鍵部分是相匹配的按鈕的:active和:hover狀態，選擇器，以允許施加不同的風格。

參見：The user action pseudo-classes :hover, :active, and :focus

Answer 3

我現在使用的一個選項（我用AngularJS &引導腳本）

HTML：

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

CSS：

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