Расходящиеся скобки на [ссылке] с помощью CSS

Опубликовано: 02.09.2018

Здравствуйте, дорогие читатели блога BlogGood.ru !

Хочу рассказать вам, как сделать эффект для ссылки . Эффект заключается в том, что при наведении мышкой на [ ссылку ] , скобки по бокам на ссылке раздвинутся.

Если вы не поняли, как этот эффект визуально выглядит, не беда, предлагаю вашему вниманию посмотреть демонстрацию этого эффекта.

[ посмотреть демонстрацию ]

Чтобы добиться такого эффекта, достаточно прописать необходимые стили в CSS.

В CSS вставьте вот этот код:

A.pushLink { padding: 0 3px; font-weight: bold; text-decoration: none; } A:hover.pushLink { padding: 0; } A:hover.pushLink span { margin: 0 3px; color: red; }

Если вам нужно, чтобы скобки раздвигались в стороны больше или наоборот меньше, то вам нужно поменять значение в строке №1 и №3 , там где « 3px ». Если вы делаете « margin: 0 10 px; », то и « padding: 0 10 px; » должен быть таким же, то есть, эти значения должны быть идентичные.

В HTML вставьте вот этот код:

<a class="pushLink" href="">[ <span>CSS cсылкa</span> ]</a>

А вот абсолютно готовый код HTML + CSS в одном файле:

<html> <head> <title> Расходящиеся скобки на [ссылке] с помощью CSS - BlogGood.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> A.pushLink { padding: 0 3px; font-weight: bold; text-decoration: none; } A:hover.pushLink { padding: 0; } A:hover.pushLink span { margin: 0 3px; color: red; } </style> </head> <body> <a class="pushLink" href="">[ <span>CSS cсылка</span> ]</a> </body> </html>

Если вы еще не подписаны на обновление моего блога, подписывайтесь!  Всем огромной удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css , html , для сайта , эффекты для сайта

IRC (Internet Relay Chat)
rss