BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Здравствуйте, дорогие читатели блога 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>

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

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

Получай обновления блога!!! Подпишись:

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

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573