0

2 つの異なるスタイルのボタンをスタイリングするのに問題があります。最初のボタンは 2 ピクセルの境界線を持つ透明な背景にする必要があり、次のボタンは Foundation のボタンのデフォルト スタイル、つまり境界線なしです。*{box-sizing: border-box;}パディング/ボーダー/マージンに関係なく、ボタンが同じサイズになるようにすると思いました。幅/高さを指定していないため、これが機能していない可能性があると思いましたが、それを行っても、通常のボタンを2pxだけ押し出す効果があり、それでもボタンをそれらの中のテキストに従った自然な幅。

私にとって簡単な解決策は、通常のボタンに背景と同じ色の境界線を追加することですが、ホバー、アクティブなどの境界線のスタイルも追加する必要があります...ちょうどあるべきだと思われますより良い方法になります。ここで何か間違ったことをしていますか？

ここに私がいる場所のjsfiddleがあります：http://jsfiddle.net/xa4d4bfv/

4

2 に答える 2

1

透明色で縁取りを入れてみてはいかがでしょうか。

a.button { 
  border: 2px solid transparent;
}
于 2015-05-08T22:51:57.600 に答える
0

ボタンのアウトラインクラスは次のようにする必要があります

.button-outline {
    border:2px solid #222;
    color: #222;
    background-color: rgba(0,0,0,0.0);
    padding: 0.9rem 2rem 0.9rem 2rem !important;
}

Suslovの答えはかなり良いですが、ボタンを同じサイズのままにしておけば大丈夫です

于 2015-05-08T22:53:18.650 に答える