Прелестная кнопка на 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-07-10 » Корпоративный сайт, который показывает масштаб компании, укрепляет доверие и ведет клиента к целевому действию
- 2026-07-10 » Сайт бронирования, который превращает интерес клиента в прямую бронь, запись или заявку
- 2026-07-10 » Образовательный сайт под ключ
- 2026-07-03 » Аналитика нового поколения: как Яндекс Метрика превращает данные в управляемые конверсии
- 2026-07-03 » Прорыв в инфлюенс-маркетинге: Яндекс Директ научился оптимизировать рекламу в Telegram и MAX под реальные продажи
- 2026-07-03 » Нейросетевой дуэт: как Gorgona и Argus меняют правила игры в контекстной рекламе Яндекса
- 2026-07-03 » Рекламная революция в «Яндекс Директе»: с 14 июля текстово-графические объявления окончательно уступают место комбинаторным
- 2026-07-03 » Макс запустил тест комментариев в публичных каналах
- 2026-07-01 » Уникальность текста: когда копировать контент можно, а когда нельзя
- 2026-07-01 » Локальный поиск в 2026 году: как алгоритмы ранжируют бизнес
- 2026-07-01 » ПромоСтраницы Яндекса: инструмент, который меняет правила игры в контент-маркетинге
- 2026-07-01 » Контент для строительных компаний: какими текстами наполнить сайт, чтобы он приносил клиентов
- 2026-07-01 » Искусство диалога с ИИ: как составить промпт, чтобы нейросеть поняла вас с полуслова
- 2026-06-26 » Новый виток эффективности: товарные объявления в Директе теперь работают на ретаргетинг мобильных приложений
- 2026-06-26 » Характеристики товаров в Товарной галерее Яндекса: как одна деталь увеличивает продажи на 4%
- 2026-06-26 » Новая реальность контент-маркетинга: треть цитируемых ChatGPT страниц невидимы для Google
- 2026-06-26 » Конец текстово-графических объявлений: Яндекс Директ переводит ЕПК на комбинаторный формат
- 2026-06-26 » Конец эпохи: Google окончательно отключает блокировщики рекламы в Chrome
- 2026-06-10 » Новые штрафы за неисполнение правил авторизации
- 2026-06-10 » Новая реальность: MAX под прицелом
- 2026-06-10 » Банки и операторов связи обяжут компенсировать похищенное мошенниками
- 2026-06-10 » Что такое «белый VPN» и чем он отличается от обычного?
- 2026-06-10 » Когда ИИ придумывает «факты»: анатомия кризиса вымышленной статистики
- 2026-06-10 » Автостратегии Яндекс.Директа: стоит ли использовать в 2026 году
- 2026-06-10 » SMM в 2026: от охватов к доверию — полный гид по стратегии
- 2026-06-10 » Яндекс.Директ вышел на новый уровень: теперь реклама в каналах «Макса» с точным таргетингом
- 2026-06-10 » РСЯ с 1 июля прекращает сотрудничество с партнерами-физлицами: что делать, чтобы не потерять доход
- 2026-06-10 » Макс становится супераппом: бесконтактная оплата через СБП в несколько секунд
- 2026-06-05 » Как Яндекс передал площадкам управление собственным контентом
- 2026-06-05 » Как создавать гайды и инструкции с помощью нейросетей
Одного яйца два раза не высидишь. К. Прутков |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

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