Прелестная кнопка на 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-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 » Контент для стоматологических клиник: какими текстами наполнить сайт, чтобы пациенты записывались сами
- 2026-07-22 » Продающие анимированные баннеры для вашего бизнеса
- 2026-07-22 » Услуги таргетолога по настройке рекламы ВКонтакте (ВК)
- 2026-07-19 » GEO / AISEO / AEO для B2C
- 2026-07-19 » GEO / AISEO / AEO для B2B
- 2026-07-15 » ИИ-агент как сотрудник: права, журнал действий и управление доступом через BearPass
- 2026-07-15 » Как проверить юриста, адвоката или нотариуса онлайн: пошаговое руководство для бизнеса
- 2026-07-15 » Телефон в вашем кармане действительно следит: кто, зачем и как это остановить
- 2026-07-15 » Куки и трекеры: какую информацию о вас собирают сайты и как это отключить
- 2026-07-15 » Почему корпоративный мессенджер — это не роскошь, а необходимость для бизнеса
- 2026-07-15 » Реклама на Авито, которая реально работает
- 2026-07-15 » Реклама на Авито, которая реально работает
- 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 » Уникальность текста: когда копировать контент можно, а когда нельзя
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

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