Как оформить менюшку «Яндекс.Новости»?

Question

[Tim Nev]

Как оформить менюшку, как в этой записи - снизу под постом будут менюшки "Яндекс.Новости" и "Гугл.Новости", - как это реализовать на сайте? На моём сайте это сделано через картинку - тупо стоят картинки Яндекс и Гугл и к ним прикручены линки, ну например вот здесь посмотреть можно. Не могу сообразить, как оформить менюшки также, как на первом сайте?

Answer 1

[Дмитрий]

Я думаю, банально оформлено с помощью стилей.

Comments

[Tim Nev]

Так-то да, я смотреть через "Посмотреть код", но не пойму какие стили прикрутить? И так понял, что функция менюшки "Яндекс.Новости"

<div class="link dzen likely__widget">
                        	<a href="https://zen.yandex.ru/ufatime" target="_blank" class="likely__button">Мы в <span>Я</span>ндекс.Дзен</a>
                        </div>

[Дмитрий]

Tim Nev, Вот этот стиль и рассматривайте

Там ведь ничего особенного нет. Рамка желтого цвета с немного закругленными углами

рамка: htmlbook.ru/css/border-style

рамка с закругленными углами htmlbook.ru/css/border-radius

при наведении делает цвет кнопки желтым. Псевдокласс hover htmlbook.ru/css/hover

шрифт htmlbook.ru/css/font

Вот и все.

[Tim Nev]

Дмитрий, спасибо, помечу это решением, поскольку в целом направление понятно.

Answer 2

[SHKD]

Приветствую, на вашем сайте просто картинки с урлами, а так как вы хотите там <button> с стилями .css
Блок в котором у вас лежат эти картинки это:

<div class="td-a-rec td-a-rec-id-content_top  td-rec-hide-on-tl td-rec-hide-on-tp td-rec-hide-on-p tdi_1 td_block_template_2">

Замените в нем картинки с урлами на кнопки со стилями.

Comments

[Tim Nev]

Да, только не пойму, какие стили? Я смотрел через "Посмотреть код", но не могу выбрать из стилей, какие именно нужны?