Стилизация ссылок CSS

Ромчик
0

Доброго времени суток. В данной статье мы поговорим о ссылках. Ссылка один из главных элементов веба. Поэтому в html ссылкам уделяется особое внимание. Ссылки (без CSS стиля) сами по себе синие и подчеркнуты. Но не всегда это вписывается в наш дизайн. Поэтому дальше мы рассмотрим, как кастомизировать ссылки.

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


a{

color: green;

text-decoration: none;

}

Изменяем цвет ссылки

Отлично. Внешний вид ссылки поменять очень легко. Но у ссылки есть еще три состояния.

Три состояния для ссылок.

Ссылки имеют три состояния и для каждого состояния мы можем прописать свои стили. Состояния для ссылок:

  1. Hover (:hover) – когда курсор мыши находится над ссылкой.
  2. Visited (:visited) – ссылка по которой пользователь уже переходил.
  3. Active (:active) – ссылка, которая находится в процессе щелчка.

Теперь зная псевдо класс для состояния мы можем прописать стили для каждого состояния ссылки. Давайте, например, сделаем, что при наведении на нашу ссылку, она будет становиться красной. Для этого в наш css файл добавим следующий код:


a:hover {

color: red;

}

Наведение курсора на ссылку

Отлично. Все работает.

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

Стилизация ссылки под кнопку

Для того, чтобы кастомизировать ссылку под кнопу и сделать эффект нажатия кнопки в наш CSS файл необходимо добавить следующий код.


a{

display: block;

background-color: gray;

width: 100px;

text-align: center;

color: white;

padding: 1em 1.5em;

text-decoration: none;

text-transform: uppercase;

box-shadow: 3px 3px 2px black;

}

a:active {

box-shadow: 0 1px 1px black;

transition: all 0.2s;

}

Эффект нажатия кнопки

Для того, чтобы выделить еще больше ссылку или показать, что этот элемент интерактивен можно изменить вид курсора (например, при наведении на ссылку).

Стилизация курсора.

Чтобы изменить вид курсора используется свойство pointer


a:hover {

cursor: pointer;

}

Ниже я приведу таблицу с основными видами курсора.

Ниже я приведу таблицу с основными видами курсора.

Курсор texttextcursor: text

 

Вид Значение Пример
 Курсор по умолчанию default cursor: default
 Курсор crosshair crosshair cursor: crosshair
 Курсор help help cursor: help
 Курсор move move cursor: move
 Курсор pointer pointer cursor: pointer
 Курсор progress progress cursor: progress
 Курсор text text cursor: text
Курсор wait wait cursor: wait

Заключение.

Мы с вами рассмотрели, как кастомизировать ссылки, какие бывают состояния ссылок, представили ссылку в виде кнопки и наложили эффект нажатия кнопки.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger
CSS
©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика