Как сделать кнопку read more

Блок с функцией «Read More» на JavaScript

Функционал «Read More / Read Less» очень часто используется на сайтах, чтобы не перегружать пространство информацией. Пользователь сам решит, какая именно ему информация интересна и нажмет на кнопку «Показать больше».

HTML разметка

Внутри контейнера поместим блок card с иконкой, текстом и ссылкой more.

CSS код

Стилизуем контейнер с карточкой.

@import url(‘https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap’);
* margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
body display: flex;/*подключение flexbox*/
justify-content: center;/*выравнивание по горизонтали*/
align-items: center;/*выравнивание по вертикали*/
min-height: 100vh;/*на всю высоту экрана*/
background: #313131;/*цвет фона*/
>
.container position: relative;/*относительное позиционирование*/
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;/*перенос разрешен на новую строку*/
width: 1200px;/*ширина контейнера*/
>
.container .card position: relative;
width: 300px;/*ширина бокса*/
padding: 20px;/*поля*/
margin: 20px;/*отступы*/
background: #3f3f3f;/*фон бокса*/
>

Стилизуем карточку с контентом внутри.

.container .card:before content: »;
position: absolute;/*абсолютное позиционирование*/
top: 0;/*верхняя позиция*/
right: 0;/*правая позиция*/
border: 20px solid transparent;/*треугольник справа*/
border-top: 20px solid #17e78c;/*верхняя линия*/
border-right: 20px solid #17e78c;/*правая линия*/
>

.container .card .icon margin-bottom: 10px;/*промежуток между иконкой и заголовком*/
>
.container .card .icon img max-width: 90px;/*ширина иконки*/
>
.container .card .content position: relative;
height: 215px;/*текстовый контент занимает высоту 215 пикселей*/
overflow: hidden;/*остальной текст скрыть*/
>
.container .card h3 color: #fff;/*цвет заголовка*/
font-size: 1.4em;/*шрифт*/
font-weight: 600;/*толщина шрифта*/
margin-bottom: 10px;/*отступ снизу*/
>
.container .card p font-weight: 300;
color: #ccc;/*цвет текста в параграфе*/
>

Создадим кнопку «Read More».

.container .card .more padding: 10px 15px;
background: #17e78c;
color: #383838;
text-transform: uppercase;/*трансформация в маленькие буквы*/
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;/*пространство между буквами*/
display: inline-block;/*отображать как строчно-блочный*/
cursor: pointer;
margin-top: 15px;
>
.container .card .more:before content: ‘Read More’;/*вывод на кнопке*/
>

Мы полностью стилизовали блок в том виде, в каком его увидит пользователь, зайдя на сайт. Назовем его состояние — не активным.

Активное состояние блока

А что изменится, когда пользователь нажмет на кнопку? Зададим стили для активного блока. В активном состоянии весь текст показывается целиком.

.container .card.active:before border-top: 20px solid #ff3b7e;/*розовый треугольник*/
border-right: 20px solid #ff3b7e;
>
.container .card.active .content height: auto;/*высота блока определяется автоматически*/
>
.container .card.active .content:before display: none;/*скрыть розовый треугольник*/
>
.container .card.active .more background: #ff3b7e;
color: #fff;
>
.container .card.active .more:before content: ‘Less More’;/*вывод на активной кнопке*/
>

Функция на Javascript

Напишем функцию, которая будет переключать наш блок между неактивным (Read More) и активным состояниями (Less More).

//находим элемент more и заносим его в переменную
let more = document.querySelectorAll(‘.more’);
//создание цикла for
for(let i=0;i more[i].addEventListener(«click»,function() more[i].parentNode.classList.toggle(«active»);
>)
>

Создано 01.12.2021 10:35:46

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Как сделать чтобы кнопку readmore было видно всегда?

Здравствуйте, пользуюсь модулем read more link, кнопку видно только тогда когда статья длинная, как сделать чтобы ее было видно всегда?

• Drupal6

• Блог
• Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

xxandeadxx 22 января 2010 в 3:19

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

Спасибо большое, а можно именно кнопку плагина Read More Link вставить, точнее просто сделать чтобы ее было видно всегда? Просто в то что вы написали нельзя вставить русский текст, он отображается иероглифами.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

Просто кто-то не особо читал и не сохраняет в расово-верной кодировке

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

Как сделать кнопку читать далее в html

Где full_article.html — это страница с полной версией материала, а read-more — это класс, который можно добавить в CSS для стилизации кнопки.

.read-more  display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 5px; font-size: 16px; transition: background-color 0.3s ease; > .read-more:hover  background-color: #0062cc; > 

Где display: inline-block задает тип элемента (в данном случае кнопка), padding задает отступы внутри кнопки, background-color задает цвет фона, color задает цвет текста, text-decoration: none убирает подчеркивание при наведении на кнопку, border-radius задает скругление углов, font-size задает размер шрифта, а transition задает плавное изменение цвета фона при наведении на кнопку.

Варианты оформления кнопки «Читать далее» (read more)

Практически на всех интернет-ресурсах, будь-то простенький сайт, тяжеловесный новостной портал или персональный блог, используется заветная кнопка «Читать далее» (read more), чаще всего это главная страница с кратким анонсами записей, страницы рубрик, архивы тегов или временные архивы, там где большая часть текста постов скрыта и заменена на ссылку «Читать далее».

Оформляют эту ссылку, кто во что горазд, кто-то обходится стандартной текстовой ссылкой, многие навешивают различные фоновые картинки, ну а мы, давайте рассмотрим несколько вариантов оформления кнопки «Читать далее» (read more), с помощью новых свойств из обоймы CSS3.

В наборе использованы 5 основных классов соответствующих той или иной цветовой схеме (pink, purple, blue, yelow, green), с помощью добавления определённых классов, изменяются базовые стили по умолчанию и при наведении курсора на ссылку «Читать далее».

читать далее читать далее читать далее читать далее читать далее

Например, для того чтобы получить кнопку с заменой фоновой заливки при наведении, достаточно добавить класс rectangle , всё, кнопка будет менять цвет в зависимости от выбранного базового класса определяющего основной цвет фона кнопки.

читать далее читать далее читать далее читать далее читать далее

Ниже вы можете посмотреть живой пример, а также код CSS, для формирования одного из стилей кнопки.

.rectangle position:relative; display: inline-block; margin:0em .5em; padding:0.25em 1.25em; background:#555; color:#fff; text-decoration:none; overflow:hidden; > .rectangle:before position: absolute; content: attr(data-text); display: inline-block; padding:0.25em 1.25em; color:#fff; text-decoration:none; top:0em; left:-100%; -webkit-transition:all 0.25s ease; -moz-transition:all 0.25s ease; -mos-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease; border:none !important; > .rectangle:hover border:none !important; background:#555; color:#fff; > .rectangle:hover:before left: 0%; border:none !important; box-shadow: inset -5px -5px 10px -7px rgba(0,0,0,0.5), inset 5px 5px 10px -7px rgba(0,0,0,0.5); color:#fff; > .rectangle:after border:none !important; >

Набор правил выстроен так, что выбрав определённый класс, понравившегося вам варианта оформления, прописав его к ссылке кнопки, вы получите полностью видоизменённую кнопку «Читать далее».

В теле кнопки вы можете, непосредственно в CSS, прописать дополнительные символы или иконки, в примере используются шрифт-иконки в виде стрелок из пакета Font Awesome, который вам нужно будет предварительно подключить к вашему проекту, для этого в разделе между тегами разместите следующее:

С помощью псевдоэлементов :after и :before в css, определяете желаемую шриф-иконку, которая будет выводится на кнопке, перед текстом или после.

/* Стрелки в круге ротация при наведении */ .arrow-circle position:relative; display: inline-block; margin:0em .5em; padding:0.25em 2em 0.25em 0.5em ; color:#555; text-decoration:none; overflow:hidden; z-index:1; -webkit-transition:all 0.25s ease; -moz-transition:all 0.25s ease; -mos-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease; border:0.0625em solid #555; > .arrow-circle:hover background:none; color:#555; > .arrow-circle:after position: absolute; margin-top: 0.07em; right:0.28em; content: "\f0a9"; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 1.25em; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -mos-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; -webkit-transform:rotateX(0deg); -moz-transform:rotateX(0deg); -mos-transform:rotateX(0deg); -o-transform:rotateX(0deg); transform:rotateX(0deg); padding-left:5px; background:none; border-left:0.0625em solid #555; border-top:none; border-right:none; border-bottom:none; > .arrow-circle:hover:after -webkit-transform:rotateX(180deg); -moz-transform:rotateX(180deg); -mos-transform:rotateX(180deg); -o-transform:rotateX(180deg); transform:rotateX(180deg); background:none; border-top:none; border-right:none; border-bottom:none; >

В статье я показал лишь два простых примера, всего же в пакете, 10 вариантов оформления ссылки «Читать далее» и это далеко не предел, скачав исходники, вы сможете поэкспериментировать с параметрами, и заделать другие, не менее, а может быть и более впечатляющие вариации.
Автор набора украинский хлопец mmetrodw, забабахал сей продукт на буржуинский лад(це ж европа, мать их). Пришлось адаптировать и выправлять ошибки выдаваемые Chrome. Надеюсь он не будет на меня в обиде)))).

Исходники залиты на Яндекс.Диск, забирайте смело, вирусов нет.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 4

NeedHate : 30 ноября, 2014 в 22:54 Наконец-то параметр content начинает становиться на порядок полезным. Ответить

Витос : 2 сентября, 2015 в 15:31 Будем пробовать Ответить

Ольга : 12 октября, 2016 в 13:20 На мой взгляд простая заливка фоном смотрится более стильно.
Всякие значки и стрелочки перегружают кнопку, которая на самом деле является самым простейшим элементом сайта и не должна отвлекать на себя внимание. Ответить

Vitaly : 19 марта, 2018 в 01:02 Большое спасибо за классный материал, все четко и ясно, а главное — красиво. Ответить

Оставить комментарий Отменить ответ

Свежие комментарии

• Дмитрий к записи Адаптивные изображения с помощью CSS
• софия к записи Как сделать простое адаптивное меню с помощью CSS3
• driver к записи Модальные всплывающие окна с помощью CSS3 без Javascript
• Марина Русамура к записи Модальные всплывающие окна с помощью CSS3 без Javascript
• Александр к записи 5 Вариантов одного меню аккордеон