Приветствую всех читающих данную публикацию! В сегодняшней статье я отвечу на один наиболее часто задаваемый вопрос: «Как создается инструментами 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> поддерживает и отображение изображений. Поэтому следующий пример я написал на основе предыдущего, дополнив некоторые моменты.
- Объявление кнопки было поменяно на строку <button><img src="https://forex-markets.ru/usd/usd-100.jpg"><p>Обменять</p></button>;
- В стилевую разметку было добавлено:
1 2 3 4 5 6 7 8 9
img { display: block; width: 200px; height: 70px; float: left; } p { padding-top:10px; }; - Добавить: button { width: 350px;}.
Хвалю всех, кто запустил мои примеры в браузере!
Не забывайте подписываться на мои обновления и делиться ссылкой с друзьями. Пока-пока!
С уважением, Роман Чуешов
