1
2つの要素があるボタンを使用して、背景をスライドさせたい。ブートストラップ要素の要素の高さ100%
しかし、他の要素が大きい場合でも、両方の要素を垂直に配置し、高さを100%にします。ここで
はHTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
そして、ここでCSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
デモ
はあなたが私を助けることができるのですか? :(
いいえ、私は一定の幅を必要としない が動的であるオプションはありません:?。?/ – CutmastaD
@CutmastaDができあなたはボタンの固定された高さを設定しますか?https://jsfiddle.net/bnb0Lswu/ – JBartus
いいえ、残念ながら私は何かをしましたが、小さなdivの高さは親の高さの100%を取得しません:https: //jsfiddle.net/e07uc4kj/12/ – CutmastaD