Вы здесь: Главная > CSS > CSS классы и идентификаторы: полное руководство для начинающих

CSS классы и идентификаторы: полное руководство для начинающих

Опубликовано автором Просмотры: 1 930

css классы и идентификаторы

Представьте, что вы разрабатываете интернет-страницу. Вы хотите, чтобы группа заголовков имела крупный красный текст, группа кнопок ─ средний белый текст, а группа абзацев − маленький синий текст.

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

Основные термины, которые нужно знать: классы CSS, селектор класса и специфичность CSS. Итак, как создать класс в CSS? Как использовать классы в CSS для оформления страниц?

Что такое CSS класс?

CSS класс элемента — это атрибут, используемый для определения группы HTML элементов с целью применения уникального стиля и форматирования к этим элементам с помощью CSS.

Давайте посмотрим на пример того, как работают CSS классы. Ниже у нас есть простая HTML-страница с тремя заголовками (элементы h2) и тремя абзацами (элементы p).

Обратите внимание, что второй заголовок, третий заголовок и последний абзац оформлены иначе, чем остальные, так как этим элементам присвоен класс .bright. Селектор класса CSS .bright применяет свои правила стиля ко всем элементам с атрибутом class=»bright».

Код HTML

<h2> Первый заголовок</h2>
<p> Первый абзац.</p>
<h2 class="bright"> Второй заголовок</h2>
<p> Второй абзац.</p>
<h2 class="bright"> Третий заголовок</h2>
<p class="bright"> Третий абзац.</p>

Код CSS

.bright {
  color: orange;
  font-family: Arial;
}

Результат

css несколько классов

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

Как создать класс в CSS?

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

Начните с написания HTML элементов, которые вы хотите стилизовать. В данном случае это абзац текста.

Код HTML

<p>Наше <span>маркетинговое программное обеспечение</span> и <span>сервисная платформа</span> предоставляют вам инструменты, необходимые для<span>привлечения</span> посетителей, <span>превращения</span> их в потенциальных клиентов и <span>завоевания их доверия</span> в качестве клиентов.</p>

Здесь размещены теги вокруг слов, которые поможет оформить CSS класс элемента. Разберёмся, как задать стиль классу CSS.

Давайте добавим атрибуты класса к этим тегам. Для этого добавьте атрибут class=»name» к открывающему тегу целевого элемента и замените name уникальным идентификатором класса.

css пример класса

 

В нашем примере HTML выглядит следующим образом:

Код HTML

<p> Наше <span class="orange-text"> маркетинговое программное обеспечение </span> и <span class="orange-text"> сервисная платформа </span> предоставляют вам инструменты, необходимые для <span class="blue-text"> привлечения </span> посетителей, <span class="blue-text"> превращения </span> их в потенциальных клиентов и <span class="blue-text"> завоевания их доверия </span> в качестве клиентов.</p>

Здесь мы добавили два CSS класса к нашим тегам span: orange-text и blue-text.

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

Куда можно добавить CSS классы в HTML?

Классы CSS могут быть добавлены к любому HTML элементу.

Самые популярные:

  • Абзац (<p>)
  • Body (<body>)
  • Title (<title>)
  • Заголовки (<h1>)
  • Цитаты (<blockquote>)
  • Span (<span>)
  • Div (<div>)
  • Изображения (<img>)
  • Кнопки (<button>)
  • Ссылки (<a>)
  • Нумерованные списки и элементы списка (<ol> и <li> соответственно)
  • Маркированные списки и элементы списка (<ul> и <i> соответственно)
  • Таблицы (<table>)

Проще говоря, если у вас есть HTML элемент, вы можете добавить CSS класс.

Сколько CSS классов можно добавить к элементу?

Часто использование классов в CSS заключается в добавлении определенного стиля к конкретному элементу.

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

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

Чем отличаются классы и ID в HTML?

Классы и идентификаторы в CSS имеют одно маленькое отличие: идентификаторы уникальны, а классы − нет.

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

Представьте комментарий к посту WordPress. Хотя вы можете использовать класс “item” для определения всех комментариев на одной странице, вы также можете назначить динамически генерируемое значение WordPress для комментария в качестве его уникального идентификатора.

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

Когда нужно использовать идентификатор, а не класс?

Хотя не существует жёсткого правила как использовать классы и ID, по общему мнению, ID стоит использовать для элементов, которые появляются один раз на странице (для верхних и нижних колонтитулов или меню), а классы ─ для элементов, которые появляются больше одного раза (для абзацев, ссылок и кнопок).

Классы и идентификаторы в CSS можно использовать совместно. Два элемента button могут иметь одинаковые классы для определения их базового размера и стиля, но разные идентификаторы для определения их положения на странице.

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

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

Что такое селектор класса CSS?

В CSS селектор классов форматируется как символ точки (.), за которым следует название класса. Он выбирает все элементы с этим атрибутом класса, чтобы уникальные блоки CSS могли быть применены к этим конкретным элементам, не затрагивая другие элементы на странице.

В нашем примере создадим блоки кода для обоих CSS классов с помощью селекторов .orange-text и .blue-text.

Код CSS

/* declaration for our first CSS class */ 
    .orange-text { 
    color: orange; 
    font-weight: bold; 
    } 
         /* declaration for our second CSS class */ 
    .blue-text { 
    color: blue; 
    font-weight: bold; 
    }

Когда мы объединяем наши HTML и CSS вместе, мы видим, как наши классы CSS нацелены на определённые элементы с помощью нашего пользовательского стиля.

Код HTML

<p> Наше <span class="orange-text"> маркетинговое программное обеспечение </span> и <span class="orange-text"> сервисная платформа </span> предоставляют вам инструменты, необходимые для <span class="blue-text"> привлечения </span> посетителей,  <span class="blue-text"> преобразования </span> их в потенциальных клиентов и <span class="blue-text"> завоевания их доверия </span> в качестве клиентов.</p>

Код CSS

/* declaration for our first CSS class */

.orange-text {

color: orange;

font-weight: bold;

}

/* declaration for our second CSS class */

.blue-text {

color: blue;

font-weight: bold;

}

свойства классов css

Обратите внимание, что атрибут класс сам по себе не изменяет содержимое или стиль HTML документа. Простое добавление атрибута класса к элементу без какого-либо CSS не изменит внешний вид или форматирование элемента во внешнем интерфейсе. В каком случае вы сможете изменить CSS класс и увидеть, что на сайте что-то поменялось? В том случае, когда CSS класс элемента получит определённые правила стиля.

Это также помогает создавать названия классов HTML CSS или имена классов, описывающие элемент в классе. В приведенном выше примере мы использовали названия классов CSS .orange-text и .blue-text, потому что мы создавали цветной текст. Эти названия достаточно наглядны, чтобы кто-то, читающий CSS, понял назначение класса.

Как называть классы в CSS?

Имя CSS класса может состоять из одного или нескольких слов. Если имя вашего класса состоит из нескольких слов, используйте дефисы там, где вы бы ставили пробелы. Кроме того, обычной практикой является написание имён классов в нижнем регистре. Логичные названия классов CSS:     .bright-blue и .fancy-text.

Как сделать класс в CSS?

Теперь, когда мы понимаем, что такое CSS класс и как он отображается в разделе body HTML файла, давайте подробнее рассмотрим использование классов в CSS.

Откройте HTML документ

Чтобы использовать CSS классы, мы на самом деле не начинаем с CSS кода. Сначала нужно открыть HTML документ в редакторе кода или в редакторе админки сайта.

Найдите или создайте элемент, который вы хотите изменить

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

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

Добавьте объявление класса CSS в открывающий тег HTML элемента

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

Код HTML

<div class="class-example"> Это div, который будет оформлен с помощью CSS класса.</div> 
<div> Это div, который останется без редактирования. </div>

Откройте CSS файл

Откройте CSS-файл в редакторе кода админки сайта или получите доступ к нему на сервере.

В качестве альтернативы, получите доступ к тегам <style > </style > в заголовке HTML документа.

Создайте класс CSS и его правила

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

Код CSS

.class-example{ 
    }

Вставьте правила вашего стиля между открытыми фигурными скобками. Это может быть что угодно, от отступов до цвета фона и цвета текста.

Не забывайте постоянно обновлять сайт, чтобы увидеть, как отображаются ваши изменения

Примените класс CSS к нескольким элементам HTML

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

Код HTML

<div class="class-example"> Это первый div, который будет оформлен с помощью нового CSS-класса.</div> 
<div> Это div, который останется без изменений.</div> 
<div class="class-example"> Это второй div, который будет оформлен с помощью того же CSS-класса.</div>

Есть некоторая разница между классом и идентификатором в CSS. В отличие от CSS ID, классы CSS можно использовать для нескольких элементов, но имейте в виду, что вы должны поддерживать согласованный тип элемента. Например, если вы создали класс для оформления div, то вам следует использовать его только для div, а не, например, для div и таблиц.

Как используется CSS стиль класса?

Bootstrap CSS-классы

Многие CSS-фреймворки интенсивно используют CSS-классы. Например, Bootstrap CSS использует классы для определения элементов страницы.

Давайте посмотрим пример того, как Bootstrap использует CSS классы. В Bootstrap CSS класс CSS .btn может использоваться с HTML-элементом <button> (а также с элементами <a> и <input>).

Bootstrap содержит CSS, который автоматически форматирует любые элементы, определенные с помощью класса .btn определённым образом. Простое добавление атрибута class=“btn” к элементу изменяет его внешний вид.

Точнее, добавление класса .btn к элементу задаёт шрифт и размер шрифта, и если посетитель нажимает на текст кнопки, появляется контур кнопки со скруглёнными краями.

В Bootstrap также есть классы для оформления кнопок другими способами, такими как цвет фона. Если мы добавим класс .btn-success или .btn-danger, кнопка будет отображаться зелёным или красным цветом соответственно.

Код HTML

<button class="btn">Кликни меня</button><br>
<button class="btn btn-success">Кликни меня</button><br>
<button class="btn btn-danger">Кликни меня</button><br>

Код CSS

button { margin: 10px; }

С помощью CSS классов Bootstrap позволяет быстро стилизовать элементы страницы, просто добавив одно или несколько имён классов. Классы CSS позволяют форматировать различные типы элементов при написании меньшего объёма кода.

Псевдо классы

На странице можно увидеть не только содержимое HTML. Большое количество информации об активности пользователя передаётся во время его взаимодействия со страницей. Часть этой информации отражает то, что они делают.

Рассмотрите возможность размещения ссылки в вашем контенте. Пользователь может взаимодействовать со ссылкой, а может и не взаимодействовать. Вы можете использовать псевдо классы для сбора временной информации о пользователе, например, когда он наводит курсор, кликает на ссылку и переходит по ссылке.

Псевдо классы обозначаются двоеточием, за которым следует класс. Они появятся после CSS селектора без пробела.

Распространённые псевдо классы для оформления ссылок:

  • :link предназначена для ссылки, которую пользователь не посещал.
  • :visited указывает на ссылку, которую пользователь посещал ранее.
  • :hover применим в ситуации, когда курсор пользователя наведён на ссылку.
  • :active нацелен на ссылку, которая нажимается.

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

В этом случае вам нужно добавить атрибут класс только к ссылкам, с которых вы хотели бы убрать подчёркивание. Добавьте четыре набора правил с помощью селектора классов и четырех соответствующих псевдо классов. В каждом блоке правил стиля установите для свойства text-decoration значение none.

HTML

<p><a href="#"> Cсылка без оформления</a></p>
<p><a href="#" class="underline-removed"> Cсылка, подчиняющаяся правилам стиля</a></p>

CSS

.underline-removed:link {
  text-decoration: none;
}
.underline-removed:visited {
  text-decoration: none;
}
.underline-removed:hover {
  text-decoration: none;
}
.underline-removed:active {
  text-decoration: none;
}

селекторы css html

Селекторы-потомки

Цель CSS классов − применить форматирование к определённым элементам. С этой целью селекторы-потомки являются отличным дополнением к вашему инструментарию.

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

Селекторы-потомки позволяют добавлять эти специальные стили к определённым словам, не затрагивая окружающий текст и не изменяя HTML документ.

Допустим, вы применили класс .blue-text к заголовку, но хотите изменить цвет слова в заголовке. Заключите слово в элемент span, затем добавьте другой набор правил с потомственным селектором: после селектора класса CSS .blue-text добавьте пробел, а затем селектор типа span.

Код HTML

<h1 class="blue-text">Мой очень<span>стильный</span> заголовок</h1>

Код CSS

.blue-text {
  color: blue;
  font-weight: bold;
}
.blue-text span {
color: orange;
}

css классы

 

Однако будьте осторожны и не переусердствуйте с этим. Чрезмерное использование селекторов-потомков может привести к созданию запутанных правил, которые затруднят внесение изменений в дальнейшем.

CSS класс против селекторов идентификаторов

В CSS классы группируют несколько элементов, в то время как идентификаторы используются для идентификации одного элемента. Используйте селектор класса CSS для оформления нескольких HTML элементов одного класса и селекторы идентификаторов для оформления одного уникального HTML элемента.

Хотя у вас может быть несколько экземпляров класса на HTML странице, у вас может быть только один экземпляр CSS ID на странице. Чтобы присвоить элементу идентификатор, добавьте атрибут id=“name” к его открывающему тегу и замените name уникальным идентифицирующим именем. В CSS соответствующий селектор идентификаторов начинается со знака фунта (#) вместо точки.

Атрибуты ID предоставляют цель для фрагментов URL (таких как привязки страниц), поэтому они должны быть уникальными. Фрагменты помогают направить пользователя к определённой части страницы — фрагмент выглядит как селектор идентификатора, размещённый в конце URL.

селекторы url

Специфика CSS

Иногда правила CSS конфликтуют. Например, если несколько селекторов нацелены на один и тот же элемент в документе, какие правила должны применяться? Это определяется спецификой CSS. В CSS разные селекторы имеют разный вес. Когда два или более правил конфликтуют в отношении одного и того же элемента, применяется более конкретное правило.

Иерархия специфичности различных селекторов

  1. Встроенный CSS. Встроенный CSS отображается в виде атрибутов стиля в открывающем теге HTML-элементов. Поскольку этот CSS наиболее близок к HTML, он обладает наивысшим уровнем специфичности.
  2. Селекторы идентификаторов. Идентификатор уникален для элемента страницы и, следовательно, очень специфичен.
  3. Селекторы классов, селекторы атрибутов и селекторы псевдо классов. Эти три типа селекторов обладают одинаковой специфичностью. Если все три типа применяются к одному и тому же HTML-элементу, то тот, который отображается последним в таблице стилей, будет применяться и переопределять остальные.
  4. Селекторы типов. Они выбирают все HTML-элементы, которые имеют заданное имя узла и имеют синтаксический элемент. Это имена элементов и псевдо элементы.

Поскольку селекторы идентификаторов очень специфичны, почти любой другой тип селектора, который сталкивается с ними, проигрывает. С другой стороны, универсальный селектор (*) будет проигрывать каждый раз из-за своей низкой специфичности.

Иногда, после применения класса CSS к диапазону элементов, вы можете захотеть переопределить правила стиля для определённого элемента на странице. Давайте рассмотрим, как вы можете легко это сделать.

Как переопределить CSS класс?

Определите класс, который вы хотите переопределить

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

Создайте более конкретное правило стиля

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

На практике это означает, что добавление селектора класса к элементу, имеющему только селектор типа, переопределит текущий класс, в то время как добавление селектора идентификатора переопределит любой конкурирующий класс или селектор типа.

Если в CSS два класса спорят, используйте команду !important

Вы также можете использовать слово !important в качестве команды для переопределения CSS-класса. В CSS !important имеет чёткое назначение: данная директива важна и должна быть применена. При размещении в конце правил стиля !important будет задавать приоритет над другими классами.

Эта команда эффективно нарушает естественную каскадную функцию CSS, что, в свою очередь, затрудняет отладку кода, поэтому её лучше использовать в особых случаях.

Начните использовать классы в HTML и CSS

CSS класс кнопки

CSS

Код HTML

<a href="https://foxyforex.ru/css" class="green">CSS</a>

Код CSS

a.green{
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08);
color: #fff;
display:block;
width:100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 8px 16px;
margin: 20px auto;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;        
}
a.green {
background-color: rgb( 43, 153, 91 );
border: 1px solid rgb( 33, 126, 74 );
}
a.green:hover {
background-color: rgb( 75, 183, 141 );
}

Стоимость
.
100$→

Код HTML

<a class="a-btn-3" href="https://sait.ru">Стоимость
<span class="a-btn-3-text">.</span>
<span class="a-btn-3-slide-text">100$</span><span class="a-btn-3-icon-right">→</span></a>

Код CSS

a.a-btn-3 {
        color: #FFFFFF;
        text-decoration: none;
        font-family: 'Oswald',Arial,sans-serif;        
}
a.a-btn-3{
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:20px;
    padding-right:80px;
    height:38px;
    display:block;
        margin: 20px auto;
        text-align:center;
        width:70px;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn-3-text{
    padding-top:5px;
    display:block;
        width:0px;
    font-size:18px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#446388;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.a-btn-3-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:18px;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height:38px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
}
.a-btn-3-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-3-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url('http://sait.ru/papka-s-kartinkoj/arrow_right.png') no-repeat 50% 55%;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn-3:hover{
    padding-right:140px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn-3:hover .a-btn-3-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
}
.a-btn-3:hover .a-btn-3-slide-text{
    width:57px;
}
.a-btn-3:hover .a-btn-3-icon-right span{
    opacity:1;
}
.a-btn-3:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}

Для вывода стрелочки → используйте HTML код:

→

Вам ещё нужно скачать и использовать в коде вот такую картинку.

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