css - 四角いボタンの作り方

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であり、異なるスタイルを適用できるようにします。

参照:ユーザー アクション疑似クラス :hover、:active、および :focus