14

ウェブサイトにボタンがあり、それを正方形にしたい:

正方形のボタンを作成し、それをボタンのように機能させて、スクロールすると少し変化する方法

ここに私の例があります:ボタンをクリックできないことに注意してください

http://jsfiddle.net/HrUWm/

(これを機能させるCSSは何ですか?)ここに私が試したものがあります:

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

4 に答える 4

8

これは仕事をします:

.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/

于 2013-04-05T00:19:40.063 に答える
3

例: 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

于 2013-04-05T00:16:50.273 に答える