Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Как просто сделать объемную кнопку с помощью css стилей. Первое знакомство с псевдоклассами

Приветствую всех читающих данную публикацию! В сегодняшней статье я отвечу на один наиболее часто задаваемый вопрос: «Как создается инструментами css объемная кнопка?». Эта тема не из легких, поэтому советую вам внимательно изучить теоретический и практический материал, предоставленный ниже.

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

Основные инструменты создания кнопок

В языке разметки html существует два тега, с помощью которых можно создать кнопку на веб-сайте. Это <button> и знакомый вам <input>.

Мои подписчики, которые читали предыдущие публикации, а также те, кто немного работал с элементом <input>, знают, что этот инструмент позволяет создавать не только button-ы, а еще и другие пользовательские объекты. Например, текстовые поля, списки, переключатели и т.д. Все это получается благодаря с атрибуту type.

Вторым тегом является <button>. По сути он работает так же, как и выше описанный элемент. Как и <input>, <button> следует оформлять внутри контейнера <form>. Кнопка, созданная не в данном контейнере будет отображаться корректно, однако информацию на сервер она не передаст.

Создание кнопки

Все же данный тег владеет некоторыми отличиями. Так, <button> предоставляет разработчикам больше возможностей по форматированию и стилизации создаваемых кнопок.

Для наглядности ниже я прикрепил пример программной реализации описанных элементов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример 1</title>
  <style>
   button, #b {
    width:500px;
    height: 30px;
    font-weight: bold;
    background: #FF00FD;
   }
  </style>
 </head>
  <body>
   <form>
    <input id = "b" type = "button" value ="Я выполнена тегом Input">
    <button>Я выполнена тегом Button</button>
   </form>
 </body>
</html>

Это еще что за «псевдоклассы»

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

Однако, согласитесь, в таком виде они не интересны и слишком обыденны. Именно поэтому приступим к освоению псевдоклассов.

Псевдоклассы отвечают за динамическое поведение объектов, определенных на веб-ресурсах. Думаю, каждый из вас замечал, как при наведении курсора на ссылку или какое-либо поле они видоизменялись. Так вот это и есть действие псевдоклассов.

Для определения такого вида поведений используется «:» и после название состояния объекта.


Обратите внимание на общий вид объявления:

Селектор (т.е. элемент): псевдокласс {определение стилевых характеристик}

Описываемый механизм может быть применим:

  • к стандартным идентификаторам: a:hover { text-shadow: 0 -1px 9px blue;};
  • к инициализированным вами селекторам: #aa:focus { color: blue;}.

Все существующие псевдоклассы делятся на 3 группы, каждая из которых отвечает за:

  • состояние объектов (visited, hover, link, focus, active);
  • дочерние элементы (first-child);
  • язык текстового контента (lang).

Так как публикация касается объемных динамических кнопок, я расскажу о некоторых элементах группы, отвечающей за состояние объектов.

Псевдокласс Предназначение
hover Срабатывает при наведении на элемент курсора мышки.
focus Устанавливает фокус на указанном элементе.
active Видоизменяет объект на веб-странице при его активации.

Примеры необычных кнопок

Простой пример кнопки

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

Данная программа создает объемную анимированную кнопку, при кликаньe на которую последняя «нажимается» за счет свойства transform.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример 2</title>
  <style>
 button {
  font-weight: bold;
  color: #ffd;
  padding: 16px;
  text-shadow: 3px -1px 1px rgba(0,0,0,.7);
  border-radius: 7px;
  border: 1px solid #2E8B57;
  background: #3CB372 linear-gradient(#3CB372, #2E8B57 75%);
  box-shadow:
   0 6px #008B49,
   inset 0 1px rgba(250,250,250,.7),
   inset 0 0 4px rgba(255,255,255,.7),
   2px 2px 25px rgba(0,0,0,.4);
  transition: 0.3s;
} 
button:hover {
  background: #43CD80 linear-gradient(#43CD80, #008B45 75%);
}
button:active {
  background: #43CD80 linear-gradient(#43CD80 10%, #008B45);
  box-shadow:
   inset 0 1px rgba(250,250,250,.7),
   inset 0 0 4px rgba(255,255,255,.7),
   0 2px rgb(80,30,10),
   0 1px 6px rgba(0,0,0,.9);
  transform: translate(0, 5px);
  -webkit-transform: translate(0, 5px);
}
  </style>
 </head>
  <body>
    <button>Я выполнена тегом Button</button>
 </body>
</html>

Хочу заметить, что <button> поддерживает и отображение изображений. Поэтому следующий пример я написал на основе предыдущего, дополнив некоторые моменты.

  1. Объявление кнопки было поменяно на строку  <button><img src="http://forex-markets.ru/usd/usd-100.jpg"><p>Обменять</p></button>;
  2. В стилевую разметку было добавлено:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    img {
    display: block;
    width: 200px;
    height: 70px;
    float: left;
    }
    p {
     padding-top:10px;
    };
  3. Добавить: button { width: 350px;}.

Хвалю всех, кто запустил мои примеры в браузере!

Не забывайте подписываться на мои обновления и делиться ссылкой с друзьями. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 83 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: