Способы улучшить вид ссылки

Ссылки - один из главных атрибутов сайта, поэтому, естественно, хочется сделать их привлекательными, да и чтобы при наведении меняли цвет,становились подчеркнутыми, увеличивались при наведении, вообщем, желаний - много. Вопрос: как придать необходимый вид ссылкам? Ответ: с использованием стилей CSS. Обычно при наведении курсора на ссылку, она как правило, изменяет свой цвет, либо становится подчёркнутой. Выглядит это довольно скучно. Рассмотрим несколько способов  для улучшения ваших ссылок.

Border-bottom

Border-bottom лучше чем text-decoration: underline. Он не пересекает нижние части букв, например yjgр, что в некоторых случаях выглядит ужасно. Также вы можете использовать разные стили бордера. Например границу из точек или пунктира.

Пример:

a { border-bottom: dashed 1px #000; }
a:hover { border-bottom: solid 1px #000; }

Background

Вы можете использовать другой фон ссылки.

Пример:

a {
color:red;
border-bottom: 1px solid red;
}
a:hover {
color:#fff;
background-color:red;
}

Ссылка с иконкой

Вы можете добавить к своей ссылке иконку, делается это очень просто:

a { background: #fff url('icon.png') no-repeat center left; }

Кроме того, вы можете использовать черно-белые иконки в обычном состоянии и цветные при наведении. Например, мы использовали этот эффект на сайте своей веб-студии внизу главной страницы.

Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку:

a:hover { text-transform: uppercase; }

Анимированные ссылки

С помощью jQuery можно сделать анимированные ссылки, например как здесь. Реализует этот эффект вот такой код:

$(document).ready(function() {  
    $('a.nudge').hover(function() {
        $(this).animate({ paddingLeft: '20px' }, 400);  
    }, function() {
        $(this).animate({ paddingLeft: 0 }, 400);  
    }); 
});

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

Похожие материалы
Корректировка алгоритма яндекс Первого января 2014 года Яндекс порадовал нас очередным апдейтом. И все бы нечего, но почему то слетели позици...
Самые эффективные методы продвижения блога Продвижение блога занимает много времени, но это очень эффективный способ привлечь трафик и увеличить преданну...
Все о внутренней оптимизации сайта После создания сайта Вам не терпится, чтобы он был доступен потенциальным посетителям. Задача, для человека не...
О заработке на почтовиках Думаю все слышали, а кто-то и пользовался таким способом заработка на почтовиках как клики. И отлично известно...
Категории раздела
Новое на форуме
Популярные материалы
Популярные теги