Как показать при нажатии на кнопку полный текст, который скрыт?
html {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.more {
display: none;
overflow: hidden;
}
.content {
overflow: hidden;
width: 100%;
padding: 20px 20px 40px 20px;
margin-left: -10px;
margin-top: -10px;
background: maroon;
font-family: sans-serif;
}
.content p {
width: 80%;
line-height: 2;
font-size: 16px;
color: white;
}
.button {
margin-top: -20px;
padding: 10px;
width: 160px;
color: black;
font-weight: normal;
font-family: sans-serif;
background: goldenrod;
border-radius: 60px;
cursor: pointer;
}
.button:hover {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
<center>
<div class="content">
<p>С поверхности Земли человек видит купол неба по-разному: днем он может быть голубым и чистым, туманно-молочным, серым от свинцовых туч. Ночью – непроглядно-черным или иссиня-фиолетовым, покрытым миллиардом светящихся точек-звезд.</p>
<p class="more">То, как выглядит небо в глазах человека, зависит от времени года, места, из которого ведется наблюдение, времени суток и, конечно, погоды. Для характеристики неба ночью есть специальный термин – «звездное небо», означающий совокупность всех астрономических объектов, которые видны на небе в это время суток. Все мы знаем, что на закате или на рассвете небеса могут быть окрашены в разные оттенки сиреневого, розового, желтого. Если небо не затянуто тучами, то ночью на нем хорошо просматривается Луна, а днем – Солнце. Если же подняться вверх на самолете и взглянуть на небо словно «с другой стороны», шапки облаков снизу будут выглядеть как многослойная вата или взбитые сливки.</p>
</div>
<div class="button">Полный текст</div>
</center>