» »

Подчёркивание ссылки с красивым эффектом


Подчёркивание ссылки с красивым эффектом

Это больше не скрипт, а такое приложение на ваш сайт, чтоб сделать его более оригинальным и здесь как раз эти стили пригодятся. Здесь вы можете изменить стандартное подчеркивание ссылки на оригинальное. А точнее на плавно появление будет, когда вы наведете курсор и сами можете выставить цвет. По умолчанию идет, что сразу появляется, здесь с левой стороны будет выезжать.

Подчёркивание ссылки для сайта uCoz

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

Код
a {
  line-height: 1;
  display: inline-block;
  color: #335ACC;
  text-decoration:none;
  cursor: pointer;
}
a:after {
  display: block;
  content: "";
  height: 2px;
  width: 0%;
  background-color: #335ACC;
  transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
  width: 100%;
}


В этих стилях и ширину и оттенок все устанавливается.

Источник: http://dbmast.ru/
14.03.2016 Просмотров: 499 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
tsakonter
tsakonter 14.03.2016 21:391
0
У меня вообще нет подчеркивание, просто запретил. А так проверил, смотрится точно оригинально, но кому как, мне понравилось, но пока оставлю как есть.
Scheme
Scheme 14.03.2016 21:482
0
Вообще интересно смотрится, поставил на сайт, один только минус, подчеркивание идет на все, даже на баннеры, но пока оставлю.
Сопрано
Сопрано 14.03.2016 21:543
0
Даже места не хватает проверить и не знаю что можно убрать в CSS только все настроили под мобильную адаптацию.
Kosten
Kosten 14.03.2016 22:004
0
вы в этой теме отписывались, нужно было запомнить, хотя сам закладки не делаю а ищу все по поиску. Вот эта тема по вашей ситуаций, которую можно исправить.
Сафрон
Сафрон 14.03.2016 22:205
0
Что только не придумают, раньше видел на одном сайте, понравилось, а вот что на всем показывает на исходящих ссылок, это вот бы не нужно.
Kosten
Kosten 14.03.2016 22:226
0
Полную статью вы можете прочесть на источнике, так как там все по полочкам разложено, взял только рабочий код, переходим и насыщаем свои полушария знаниями.
Сопрано
Сопрано 14.03.2016 22:267
0
Все нормально, сделал себе такой эффект, мне нравиться, не знаю кому как, его можно быстро как поставил убрать.
Сопрано
Сопрано 14.03.2016 22:268
0
Цитата Kosten
насыщаем свои полушария знаниями.

biggrin
Kosten
Kosten 15.03.2016 00:099
0
Trantel, но а что надо чем то полушарие забивать, а то дурь быстро место займет.
avatar