v2.5.2
Giriş yap

Css Label Checkbox

hellgun
530 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Css ile labeli kullanarak güzel görünümlü checkbox yapıyım dedim ve yaptımda doğru mu tam bilmemekle birlikte sıkıntım şu sayfamın ekranı küçülse bile labeller sayfada aşağı inmemekte.. Bir çok deneyişte bulundum başarılı olamadım. Son çareyi burada buldum. Şimdiden teşekkür ederim.

kodlarım bunlar
yani derdim ekran küçüldükçe bunların aşağı doğru inmesi fakat olmadı bir türlü
umarım derdimi anlatabilmişimdir.

<div class="cont">
    <div class="tur">
        <div class="item">
            <input type="checkbox" id="aksiyon">
            <label class="btn" for="aksiyon">aksiyon</label>
        </div>
        <div class="item">
            <input type="checkbox" id="macera">
            <label class="btn" for="macera">macera</label>
        </div>
        <div class="item">
            <input type="checkbox" id="animasyon">
            <label class="btn" for="animasyon">animasyon</label>
        </div>
        <div class="item">
            <input type="checkbox" id="cocuk">
            <label class="btn" for="cocuk">çocuk</label>
        </div>
        <div class="item">
            <input type="checkbox" id="komedi">
            <label class="btn" for="komedi">komedi</label>
        </div>
        <div class="item">
            <input type="checkbox" id="suc">
            <label class="btn" for="suc">suç</label>
        </div>
        <div class="item">
            <input type="checkbox" id="drama">
            <label class="btn" for="drama">drama</label>
        </div>
        <div class="item">
            <input type="checkbox" id="korku">
            <label class="btn" for="korku">korku</label>
        </div>
        <div class="item">
            <input type="checkbox" id="romantik">
            <label class="btn" for="romantik">romantik</label>
        </div>
        <div class="item">
            <input type="checkbox" id="gerilim">
            <label class="btn" for="gerilim">gerilim</label>
        </div>
        <div class="item">
            <input type="checkbox" id="bkurgu">
            <label class="btn" for="bkurgu">bilim kurgu</label>
        </div>
        <div class="item">
            <input type="checkbox" id="fantastik">
            <label class="btn" for="fantastik">fantastik</label>
        </div>
        <div class="item">
            <input type="checkbox" id="western">
            <label class="btn" for="western">western</label>
        </div>
    </div>
</div>
body{
    background: #bdc3c7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.cont{

}
.tur{
    display: flex;
    justify-content: center;
}
.item{
    
}
.btn{
    font-size: 12px;
    line-height: 45px;
    height: 45px;
    background: #ED213A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0px 0px 100px .1px red;
    color: white;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 10px 15px;
    margin-right: 10px;
    cursor: pointer;
    transition: 200ms all;
    font-weight: bolder;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
input[type=checkbox]{
    position: absolute;
    left: -9999px;
    opacity: 0;
}
input[type=checkbox]:checked + .btn{
    color: white;
    box-shadow: 0px 0px 100px 1px green;
    background: #5A3F37;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #246238, #65b94e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #246238, #65b94e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
Cevap yaz
Cevaplar (1)
hellgun
1565 gün önce

sorun çözüldü.