css ile devamını göster butonu yapmak

ABaris
html tek sayfa hazırladınız ve css ile devamını göster butonu yapmak istiyorsunuz.

HTML KODU ;




lorem ipsum dolor sit amet, consectetur adipisicing elit. libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? excepturi vero tempore minus beatae voluptatem!








lorem
lorem 2
lorem 3
lorem 4





CSS KODU;

.read-more-state {
display: none;
}

.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
content: 'daha fazla göster';
}

.read-more-state:checked ~ .read-more-trigger:before {
content: 'daha az göster';
}

.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}

/* other style */
body {
padding: 2%;
}

p {
padding: 2%;
background: #fff9c6;
color: #c7b27e;
border: 1px solid #fce29f;
border-radius: .25em;
}

neden bekliyorsun?


bu sözlük, duygu ve düşüncelerini özgürce paylaştığın bir platform, hislerini tercüme eden özgür bilgi kaynağıdır.
katkıda bulunmak istemez misin?

üye ol