botón leer más en el ejemplo de código html y css

Este equipo redactor ha pasado mucho tiempo buscando para dar solución a tu pregunta, te dejamos la respuesta por esto nuestro deseo es servirte de gran apoyo.

Ejemplo 1: leer más css js

$(document).ready(function()
		$('div.post div.container').each(function()
			var Hval = $(this).height();
			var Hval_P = $(this).parent().height();
			if (Hval > Hval_P) 
				$(this).parent().find('div#fade').css('display':'block');
				$(this).parent().find('a#more').css('display':'block');
			
		);
		$('a#more').click(function()
			var Hval = $(this).parent().find('div.container').height();
			var Hval_P = $(this).parent().height();
			if (Hval > (Hval_P+500)) 
				$(this).parent().css('max-height':Hval_P+500);

				var offset = $(this).offset().top - 150;
				$([document.documentElement, document.body]).animate(
			        scrollTop: offset + 500
			    , 250);

				$(this).hide();
				$(this).parent().find('a#evenmore').css('display':'block');
			else
				$(this).parent().css('max-height':Hval-Hval_P);
				$(this).hide();
				$(this).parent().find('div#fade').css('display':'none');
				$(this).parent().find('a#less').css('display':'block');
			
		);
		$('a#evenmore').click(function()
			var Hval = $(this).parent().find('div.container').height();
			$(this).parent().css('max-height':Hval);

			var offset = $(this).offset().top - 150;
			$([document.documentElement, document.body]).animate(
			    scrollTop: offset + 500
			, 250);

			$(this).hide();
			$(this).parent().find('div#fade').css('display':'none');
			$(this).parent().find('a#less').css('display':'block');
		);
		$('a#less').click(function()
			$(this).parent().css('max-height':'300px');

			var post_P = $(this).parent().offset().top;
			$([document.documentElement, document.body]).animate(
			    scrollTop: post_P
			, 250);

			$(this).hide();
			$(this).parent().find('div#fade').css('display':'block');
			$(this).parent().find('a#more').css('display':'block');
		);
	);

Ejemplo 2: leer más css js

.post
		width: 500px;
		height: auto;
		max-height: 300px; /*whatever you want*/
		margin: auto;
		margin-bottom: 20px;
		padding: 5px 30px 20px 20px;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(0,0,0,.1);
		font-family: sans-serif;
		transition: all 250ms linear 0ms;
	
	.container
		width: 500px;
		height: auto;
		margin: auto;
		padding: 0px;
		position: relative;
		overflow: hidden;
	
	.post div#fade
		width: 100%;
		height: 150px;
		margin: auto;
		padding: 0px;
		position: absolute;
		bottom: 0px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
		z-index: 1;
		display: none;
	
	.post a#more
		position: absolute;
		bottom: 10px;
		right: 20px;
		text-decoration: none;
		color: #4bbfee;
		z-index: 2;
		display: none;
	
	.post a#less
		position: absolute;
		bottom: 10px;
		right: 20px;
		text-decoration: none;
		color: #4bbfee;
		z-index: 2;
		display: none;
	
	.post a#evenmore
		position: absolute;
		bottom: 10px;
		right: 20px;
		text-decoration: none;
		color: #4bbfee;
		z-index: 2;
		display: none;
	

Si piensas que te ha sido útil este artículo, sería de mucha ayuda si lo compartes con otros seniors y nos ayudes a difundir nuestro contenido.

---

---

Utiliza Nuestro Buscador