Прелестная кнопка на CSS3
Кнопки являются популярным способом взаимодействия с электронными устройствами, таким как радио, телевизоры, плееры и даже смартфоны, которые все еще нуждаются в одной или двух кнопках.
В нашу цифровую эпоху кнопки также приобретают цифровую форму, что делает их более интерактивными, динамическими и простыми в использовании, по сравнению с физическими кнопками.
В данном уроке мы создадим очаровательную интерактивную кнопку с помощью CSS.
Разметка HTML
Начнем делать кнопку с размещения соответствующей разметки в нашем HTML документе. Она очень простая. Кнопка строится на основе тега ссылки, также мы добавляем элемент span для создания индикатора, и все оборачивается в тег HTML5 section.
<section> <a rel="external" href="#button" id="button"></a> <span></span> </section>
Вот так будет выглядеть наша кнопка.
Основные стили
Для начала добавим темный фон для документа и выставим элемент section в центре. Затем удалим точечную обводку outline для состояний ссылки :focus и :active.
body {
background: url('images/micro_carbon.png');
}
section {
margin: 150px auto 0;
width: 75px;
height: 95px;
position: relative;
text-align: center;
}
:active, :focus {
outline: 0;
}
Шрифт для символа
Для символа иконки мы будем использовать специальный шрифт Awesome, а не изображение. Для такой иконки легко изменять стиль и масштаб с помощью команд CSS.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),
url("fonts/fontawesome-webfont.woff") format('woff'),
url("fonts/fontawesome-webfont.ttf") format('truetype'),
url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
font-weight: normal;
font-style: normal;
}
Иконка символа включения, которую мы используем в нашем примере, имеет код F011. В выше приведенной разметке HTML в теге ссылки используется  , но иконка будет корректно выводиться после определения свойства font-family в стилях кнопки.
Стили кнопки
Сначала нужно определить свойство font-family для кнопки.
Наша кнопка будет круглой. Ее форма создается с помощью эффекта использования для свойства border-radius значения половины ширины кнопки.
Так как мы используем шрифт для иконки мы можем установить цвет color и добавить свойство text-shadow для нее.
Затем мы создаем для кнопки скошенную кромку. Данный эффект требует небольшого трюка. Сначала нужно установить фоновый цвет background-color: rgb(83,87,93); для основы кнопки, а затем добавляем четыре слоя теней box-shadows.
a {
font-family: "FontAwesome";
color: rgb(37,37,37);
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
font-size: 32pt;
display: block;
position: relative;
text-decoration: none;
background-color: rgb(83,87,93);
box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */
0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */
inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */
width: 70px;
height: 70px;
border: 0;
border-radius: 35px;
text-align: center;
line-height: 79px;
}
Также у нас имеется большой круг снаружи нашей кнопки. Для него используется псевдо-элемент :before.
a:before {
content: "";
width: 80px;
height: 80px;
display: block;
z-index: -2;
position: absolute;
background-color: rgb(26,27,29);
left: -5px;
top: -2px;
border-radius: 40px;
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
Индикатор
Под кнопкой установлен небольшой индикатор для отображения статуса кнопки. Мы используем красный цвет, так как кнопка изначально выключена. Также добавляем box-shadow для имитации эффекта рассеянного свечения.
a + span {
display: block;
width: 8px;
height: 8px;
background-color: rgb(226,0,0);
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(226,0,0,0.5);
border-radius: 4px;
clear: both;
position: absolute;
bottom: 0;
left: 42%;
}
Эффект
Теперь наша кнопка выглядит прилично и остается только добавить несколько эффектов. Включенная кнопка должна выглядеть нажатой.
Для достижения визуального эффекта сначала свойство box-shadow для кнопки обнуляется и немного изменяется положение. Также настроить интенсивность трех теней для соответствия положения кнопки.
a:active {
box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */
0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */
inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */
background-color: rgb(83,87,93);
top: 3px;
}
Затем, после нажатия кнопка должна оставаться в нажатом положении, а иконка должна светиться для отображения включенного состояния.
Для достижения подобного эффекта мы используем псевдо-класс :target для изменения цвета иконки и добавления свойства text-shadow с белым цветом.
a:target {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}
Также нужно изменить значение свойства box-shadow для внешнего круга кнопки:
a:active:before, a:target:before {
top: -5px;
background-color: rgb(26,27,29);
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
Индикатор будет изменять свой цвет на зеленый во включенном состоянии.
a:target + span {
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(135,187,83,0.5);
background-color: rgb(135,187,83);
}
Эффект перехода
В завершении сделаем эффект плавного включения кнопки.
Ниже приведенный код устанавливает переход значения свойств элемента ссылки color и text-shadow в течении 350ms.
a {
transition: color 350ms, text-shadow 350ms;
-o-transition: color 350ms, text-shadow 350ms;
-moz-transition: color 350ms, text-shadow 350ms;
-webkit-transition: color 350ms, text-shadow 350ms;
}
А следующий код устанавливает переход свойств background-color и box-shadow для индикатора.
a:target + span {
transition: background-color 350ms, box-shadow 700ms;
-o-transition: background-color 350ms, box-shadow 700ms;
-moz-transition: background-color 350ms, box-shadow 700ms;
-webkit-transition: background-color 350ms, box-shadow 700ms;
}
Бонус. Включение и выключение
Если попробовать выше приведенный код, то можно заметить, что кнопка только единожды включается. К сожалению, для реализации функционала включения/выключения придется использовать JavaScript. Применим jQuery.
$(document).ready(function(){
$('#button').click(function(){
$(this).toggleClass('on');
});
});
Выше приведенный код добавляет класс ON к ссылке, для чего используется функция toggleClass. Когда элемент #button нажат, jQuery проверяет наличие класса. Если класс имеется, то jQuery удаляет его, если нет - добавляет.
Примечание: Обязательно подключите библиотеку jQuery.
Нужно немого изменить код CSS. Просто замените все псевдо-элементы :target на селектор класса .on:
a.on {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
top: -5px;
background-color: rgb(26,27,29);
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on + span {
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(135,187,83,0.5);
background-color: rgb(135,187,83);
}
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yO7YGEZvj8E/lessons.php
|
Кнопки являются популярным способом взаимодействия с электронными устройствами, таким как радио, телевизоры, плееры и даже смартфоны, которые все еще нуждаются в одной или двух кнопках.В нашу |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2026-08-25 » Статистика каналов в Максе: почему это важно для вашего бизнеса
- 2026-08-25 » Долгожданный контакт: как появление @AdSupport меняет правила игры в Telegram-рекламе
- 2026-08-25 » Скидка, которая видит покупателя насквозь: как новый инструмент Яндекса превращает бюджет в продажи
- 2026-08-25 » Новая эра телевизионной рекламы: как Яндекс Директ превращает экран в витрину
- 2026-08-25 » Отзывы как двигатель продаж: как обратная связь клиентов продвигает ваш сайт в поиске
- 2026-08-19 » ИИ проверят на соответствие духовно-нравственным ценностям: что это значит для вашего бизнеса
- 2026-08-19 » Маркировка ИИ-контента: что меняется для бизнеса с 1 сентября 2026 года
- 2026-08-19 » Белый список Минцифры: как сайты попадают в перечень и что это значит для вашего бизнеса
- 2026-08-19 » Мобильное приложение Директа получило новые возможности: создание ЕПК и агентский доступ
- 2026-08-19 » Google тестирует новую главную страницу без кнопки поиска: что это значит для вашего бизнеса
- 2026-08-12 » Контент для транспортной компании: какими текстами наполнить сайт, чтобы клиенты выбирали вас
- 2026-08-12 » Сезонность в SEO: как анализировать спрос, не путать падение с катастрофой и готовить сайт к пику продаж
- 2026-08-12 » Семантический поиск: почему плотность ключей умерла и как теперь выводить сайт в топ
- 2026-08-12 » ChatGPT без лимитов: как новая эра искусственного интеллекта меняет правила для вашего бизнеса
- 2026-08-12 » Нейропрофиль VK: как объединение данных пользователей меняет правила таргетинга и продвижения
- 2026-08-03 » Мессенджер «Макс» перестал расходовать мобильный трафик: новый уровень доступности для ваших клиентов
- 2026-08-03 » Яндекс Директ запустил динамический коллтрекинг: как бесплатно оценивать реальные звонки и платить только за результат
- 2026-08-03 » Макс открыл истории для всех пользователей Android: новый канал коммуникации для вашего бизнеса
- 2026-08-03 » Новый инструмент в Яндекс Товарах: как сравнение с похожими бизнесами помогает расти
- 2026-08-03 » Яндекс Вебмастер ускорил обновление данных в Мониторинге запросов: что это значит для вашего бизнеса
- 2026-07-29 » «Адаптация бюджета» в Яндекс Директе: как автоматически масштабировать рекламу без потери эффективности
- 2026-07-29 » Overlay в РСЯ: новый формат мобильной рекламы, который не раздражает пользователей
- 2026-07-29 » «Панорама» в Яндекс Директе: новый уровень охватной рекламы для вашего бизнеса
- 2026-07-29 » Карточки товаров и отзывы на маркетплейсах: что по закону считается рекламой, а что нет
- 2026-07-29 » Комментарии в приватных каналах «Макс»: новый инструмент для бизнес-коммуникаций
- 2026-07-23 » Как ошибки в AI-ответах портят репутацию компании
- 2026-07-23 » Маркировка рекламы в 2026 году: фатальные ошибки, которые обойдутся вашему бизнесу в полмиллиона рублей
- 2026-07-23 » Нейросети в дизайне сайтов и графике: революция, эволюция или угроза?
- 2026-07-23 » РСЯ открыла инструмент авторасстановки рекламы для всех партнеров: как автоматизация меняет правила монетизации
- 2026-07-23 » Контент для стоматологических клиник: какими текстами наполнить сайт, чтобы пациенты записывались сами
Полезнее знать несколько мудрых правил, которые всегда могли бы служить тебе, чем выучиться многим вещам, для тебя бесполезным Сенека Луций Анней - (1 до н. э. / 1 н. э.- 65 н. э.) - римский государственный деятель, писатель, философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.