Иногда на сайте необходимо отобразить фрагмент новости, чтобы заинтересовать посетителя прочесть ее. Обычно такую информацию подают в виде блоков, которые расположены под прочитанной новостью или в сайдбаре, но в данном уроке мы рассмотрим немного иной подход к поставленной задаче, мы отобразить превью новости на кнопках, главной особенностью будет то, что текст будет прокручиваться, что привлечет внимание посетителя, так как кнопка будет «живая». Давайте посмотрим, что же у нас с этого получилось.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

Структура достаточно простая, у нас будет неупорядоченный список, с классом цвета для каждой кнопки, для каждой кнопки будет свой класс с цветов, содержания контейнера будет текстовая информация которая отображается на кнопке.

У нас будет четыре таких кнопки, по этому мы дублируем параметры, изменяет только класс цвета, более детально разметку вы можете просмотреть в исходниках, а теперь давай перейдем к следующему шагу.

Превью новостей в виде кнопок с помощью CSS3

Шаг 2. CSS

Для начала мы определим общие параметры контейнера, мы установим параметры для переворота текста, так, чтобы он изменялся другим, но при этом предыдущим текст уходил в не видимую часть кнопки.

Так как у нас четыре разных кнопки, мы добавили цвет и заливку для каждой кнопки, в результате у нас получились вот такие правила.

Такое решение может сэкономить вам множество места на сайте, при этом проинформировав пользователя, что на вашем ресурсе есть еще много интересной информации которую не стоит упускать.

Вот и все. Готово!