Jak zrobić przycisk czytaj więcej w css?


0
Jak zrobić przycisk czytaj więcej w css?

Z powodu różnych, chociażby wydajnościowych chcielibyśmy uniknąć dodawania kolejnego nakładu javascriptu do naszej witryny. Prosta rzecz z reguły, czyli przycisk czytaj więcej, jest możliwa do wykonania w cssie. Metoda da doskonale sprawdzi się przy statycznych stronach. Jeżeli chciałbyś wdrożyć rozwiązanie na jakimś cmsie, upewnij się, że wyłączony jest HTML Purifier, ponieważ przy wdrażaniu części htmlowej, mogą zostać usunięte, niezbędne elementy w kodzie, ale należy najpierw przetestować, czy kod zostanie uszczuplony, czy też nie. Przed samym implementowaniem częsci htmlowej, dodaj style. Na samym dole wpisu można pobrać przykładowy kod.

<!-- html -->
<html>
<head>
<title>Czytaj więcej/Read More - CSS</title>
<link rel="stylesheet" href="style/global.css">
</head>

<body>
<div id="sekcja-czytaj-wiecej">
<h1>What is Lorem Ipsum?</h1>
<input type="checkbox" class="czytaj-wiecej" id="czytaj-wiecej">
<div class="czytaj-wiecej-zawin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<span class="czytaj-wiecej-span">
<h2>Heading 2</h2>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</span>
</div>
<label for="czytaj-wiecej" class="czytaj-wiecej-label"></label>
</div>
</body>
</html>
/* css */
body {
	background:#000;
}

h1, h2, p {
	color:#fff;
}

.czytaj-wiecej-label {
	background-color: #FF0000;
	color:#fff;
	margin-top:25px;
	padding:10px;
	border-radius:15px;
	cursor:pointer;
}

.czytaj-wiecej-label:hover {
	background-color:#fff;
	color: #ff0000;
}

.czytaj-wiecej-span{
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.czytaj-wiecej {
  display: none;
}

.czytaj-wiecej:checked ~ .czytaj-wiecej-zawin .czytaj-wiecej-span {
  opacity: 1;
  font-size:15px;
  max-height: 100%;
}

.czytaj-wiecej ~ .czytaj-wiecej-label:before {
  content: 'Czytaj więcej';
}

.czytaj-wiecej:checked ~ .czytaj-wiecej-label:before {
  content: 'Ukryj';
}

Podoba ci się? Podziel się z przyjaciółmi!
0
Jeremiasz Nowak
Na co dzień młodszy programista php, ale nie unika frontendowych technologii. Interesuje się szeroko pojętym pozycjonowaniem (seo). W tej sferze stara się wykorzystać swoje umiejętności programowania w php - w oparciu o najpopularniejsze platformy, cmsy.

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *