Расходящиеся скобки на [ссылке] с помощью 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 , для сайта , эффекты для сайта