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

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

2015-06-08 / Вр:11:02 / просмотров: 4583

Здравствуйте, дорогие читатели блога 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 10px;», то и «padding: 0 10px;» должен быть таким же, то есть, эти значения должны быть идентичные.

В 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 ENGINE="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>

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