3

ボタンが状態のときに、要素のテキスト<button>をわずかに下/右に移動させたい:active。paddingボタンの内部を変更して、合計が同じになるようにすることで、それができると思いました。

私のHTML：

<button>Hello</button><button>Goodbye</button>

これが私のCSSです：

button {
    border: 1px solid #9f9b9a;
    border-radius: 5px;
    background: url("button.png") repeat-x;
    font-size: inherit;
    padding: 0.1em 0.5em 0.1em 0.5em;
    cursor: default;
}

button:hover {
    border-color: black;
    background-position: left -5px;
}

button:active {
    padding: 0.2em 0.4em 0 0.6em;
}

最後に、これが私の jsFiddle です。

http://jsfiddle.net/nQFHt/

内部パディングの合計を0.2em垂直方向と水平方向に維持することで、ボタンの状態がページのレイアウトにまったく影響を与えると思っていましたが、1emボタンをマウスダウンすると移動します。HelloGoodbye

私が望む効果を得るためのより良い方法はありますか？

写真:

ここに画像の説明を入力

4

4 に答える 4

0

ボタンの代わりにリンクを使用してスタイルを設定することをお勧めします。<a>ボタンと多くのオプションをより適切に制御できるからです。

これが私の例です: HTML:

<a href="#"><span>click ME</span></a>
<a href="#"><span>click ME too</span></a>

そしてCSS：

a{
    border: 1px solid #9f9b9a;
    border-radius: 5px;
    background: url("button.png") repeat-x;
    font-size: inherit;
    padding: 0.1em 0.5em 0.1em 0.5em;
    cursor: default;
    text-decoration:none;
}
a:hover{        
    border-color: black;
    background-position: left -5px;
}
a:active div{
    position:relative;
    top:1px;
    left:1px;
}

これが私のjsFiddleです：ここ

于 2013-10-14T09:05:30.813 に答える