Оформление кнопок на css

Создать кнопку на изображении

Шаг 1) Добавить HTML:

<div class=»container»>  <img src=»img_snow.jpg» alt=»Снег»>  <button class=»btn»>Кнопка</button></div>

Шаг 2) Добавить CSS:

/* Контейнер, необходимый для размещения кнопки. Отрегулируйте ширину по мере необходимости */ .container {  position: relative;  width: 50%;}/* Сделайте изображение отзывчивым */.container img {  width: 100%;  height: auto;}/* Стиль кнопки и поместите его в середине контейнера/изображения */.container .btn {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  background-color: #555;  color: white;  font-size: 16px;  padding: 12px 24px;  border: none;  cursor: pointer;  border-radius: 5px;}.container .btn:hover {  background-color: black;}

Шаг 1. Рисование подсвеченного шара

Создайте новый документ в фотошопе.

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

Начнем рисовать шар. Создайте новый слой и нарисуйте на нем желтый круг. Цвет я использовал — FFB911.

Чтобы шар был объемным необходимо добавить свет и тень на него.

Создайте выделение этого круга, нажав на слой с кругом с зажатой клавишей CTRL на клавиатуре.

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

Тоже самое повторите с тенью. Создайте новый слой и нарисуйте на краю шара(снизу справа) темное пятно.

Теперь необходимо нарисовать тень под самим шаром. Для этого создайте новый слой который будет ниже всех остальных (кроме фона с синем пятном). Нарисуйте на нем черной кистью большое пятно. Нажмите CTRL+T чтобы трансформировать его и сожмите его по вертикале.

На данный момент процесса наша картинка выглядит так:

Шаг 2. Треугольник PLAY (символ)

Создайте новый слой. Позьмите инструмент Многоугольник (Polygonal Tool) на панели инструментов.

Теперь настройки этого инструмента. Темно коричные цвет и 3 стороны угольника.

Рисуйте треугольник по центру шара.

А теперь примените к треугольнику следующие стили:

Внутренняя тень (Inner Shadow)

Перекрытие градиентом (Gradient Overlay)

После эффектов будет выглядеть так:

Треугольник будет светиться. Для этого создайте новый слой под слоем с треугольником. На нем используя белую мягкую кисть нарисуйте под треугольником пятно.

Продублируйте слой со свечением (CTRL+J). Транформируйте его так чтобы он сжался в полоску, разверните его и поместите относительно одной из сторон треугольника.

Повторите это еще два раза, относительно остальных двух сторон треугольника.

После этого шага картинка выглядит так:

Как добавить иконку в кнопке?

Иногда красивой кнопки становиться мало, и хочется нечто большего. В такой момент приходит помощь, в создании небольшой иконки, перед или же после текста.


Рисунок 3: Иконка в кнопке

Как же это сделать?Переходи к редактированию кода, указанного выше. Нам следует добавить элемент IMG непосредственно в сам контейнер кнопки DIV, а так же указать у него один из атрибутов SRC – отвечающий за путь до картинки.

Рисунок 4: Кнопочка с иконочкой

Сразу скажу, что с первого раза может не получиться. И ваша кнопка немного съедет. Окажется немного выше или ниже положенного положения.

Именно меня такая кнопка не устраивает, поскольку иконка кажется для меня слишком большой. Переходим к написанию стилей. Уменьшим иконку и выровняем её относительно текста. Делается это следующим образом:

Рисунок 5: Кнопка с уменьшенной иконкой

Разберёмся, что тут происходит:

  • float – параметр, позволяющий обтекать кнопку с левой (left) или правой стороны (right);
  • margin-top и margin-left – это невидимые границы, создающий отступы с верхней стороны и левой стороны. Так-же можно задать отступы с низу (bottom) и права (right);
  • width – ширина картинки.
  • height – высота картинки.

Именно таким способом, можно создать красивую кнопку на сайте, привлекающую к себе внимание, что играет немало важную роль в создании сайта.Полный код страницы:

Пока нет оценок, но вы можете быть первым!

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

CSS стили для переключателя

Создать дизайн переключателю можно по-разному. В качестве примера рассмотрим 5 вариантов дизайна.

Дизайн переключателя как в Material Design

.switch-btn {
    display: inline-block;
    width: 62px; /* ширина переключателя */
    height: 24px; /* высота переключателя */
    border-radius: 12px; /* радиус скругления */
    background: #bfbfbf; /* цвет фона */
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
    content: "";
    height: 36px; /* высота кнопки */
    width: 36px; /* ширина кнопки */
    border-radius: 18px; /* радиус кнопки */
    background: #fff; /* цвет кнопки */
    top: -6px; /* положение кнопки по вертикали относительно основы */
    left: -6px; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    box-shadow: 0 0 10px 0 #999999; /* тень */
    position: absolute;
    z-index: 1;
}
.switch-on {
    background: #fff;
    box-shadow: inset 0 0 10px 0 #999999; /* тень */
}
.switch-on::after {
    left: 30px;
    background: #118c4e;
}

Дизайн переключателя для интерфейсов, не использующих скругления углов

.switch-btn {
    display: inline-block;
    width: 62px; /* ширина переключателя */
    height: 24px; /* высота переключателя */ 
    background: #bfbfbf; /* цвет фона */
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
    content: "";
    height: 36px; /* высота кнопки */
    width: 36px; /* ширина кнопки */ 
    background: #fff; /* цвет кнопки */
    top: -6px; /* положение кнопки по вертикали относительно основы */
    left: -12px; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    box-shadow: 0 0 10px 0 #999999; /* тень */
    position: absolute;
    z-index: 1;
}
.switch-on {
    background: #fff;
    box-shadow: inset 0 0 10px 0 #999999; /* тень */
}
.switch-on::after {
    left: 36px;
    background: #118c4e;
}
.switch-btn {
    display: inline-block;
    width: 72px; /* ширина */
    height: 38px; /* высота */
    border-radius: 19px; /* радиус скругления */
    background: #bfbfbf; /* цвет фона */
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
    content: "";
    height: 32px; /* высота кнопки */
    width: 32px; /* ширина кнопки */
    border-radius: 17px;
    background: #fff; /* цвет кнопки */
    top: 3px; /* положение кнопки по вертикали относительно основы */
    left: 3px; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    position: absolute;
    z-index: 1;
}
.switch-on {
    background: #118c4e;
}
.switch-on::after {
    left: 37px;
}

Дизайн переключателя с квадратной кнопкой

.switch-btn {
    display: inline-block;
    width: 72px; /* ширина */
    height: 38px; /* высота */ 
    background: #bfbfbf; /* цвет фона */
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
    content: "";
    height: 32px; /* высота кнопки */
    width: 32px; /* ширина кнопки */ 
    background: #fff; /* цвет кнопки */
    top: 3px; /* положение кнопки по вертикали относительно основы */
    left: 3px; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    position: absolute;
    z-index: 1;
}
.switch-on {
    background: #118c4e;
}
.switch-on::after {
    left: 37px;
}

Дизайн переключателя с градиентом

.switch-btn {
    display: inline-block;
    width: 72px; /* ширина */
    height: 38px; /* высота */ 
    background: #bfbfbf; /* цвет фона */
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
    content: "";
    height: 32px; /* высота кнопки */
    width: 32px; /* ширина кнопки */ 
    background: #fff; /* цвет кнопки */
    top: 3px; /* положение кнопки по вертикали относительно основы */
    left: 3px; /* положение кнопки по горизонтали относительно основы */
    transition-duration: 300ms; /* анимация */
    position: absolute;
    z-index: 1;
}
.switch-on {
    background: #118c4e;
}
.switch-on::after {
    left: 37px;
}

Создаём структуру кнопки на HTML


Для начала нам необходимо создать первичную структуру сайта: HTML – HEAD — STYLE – BODY.

Ну и, конечно же, как вы можете заметить, сами стили я буду использовать в самом документе сайта, хоть это и не правильно, но каждый видит по-своему. Переходим к нашему созданию. В первую очередь создадим контейнер (DIV) и завернём его в ссылку (A). Ах да, чуть не забыл… Для контейнера DIV, нужно прописать атрибут class и присвоить ему значение «button». Выглядеть это всё, будет следующим образом:

Половина дела сделана, осталась вторая половина. Переходим к стилям, и начинает творить чудеса. В разделе STYLE обращаемся к классу нашей кнопки и прописываем различные атрибуты, влияющие на её форму и внешние признаки. Код страницы будет выглядеть следующим образом.

Рисунок 2: Получившийся элемент

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

  • width – этот параметр отвечает за ширину кнопки, в моём случае 200 идеально подходит для размера.
  • height – параметр, отвечающий за высоту кнопки.
  • background-color – один из параметров заднего фона. В данном случае цвет. Углубляясь в оптимизацию сайта и более быструю загрузку, я понял, что лучше всего весь сайт создавать при помощи цветов, напрочь отказавшись от картинок. Даже если вы используете градиентный рисунок, намного оптимальнее будет задать его через свойство gradient. Это ускорит загрузку сайта, хоть и не намного. #000 – в данном случае это значение цвета, заданное в 16-тиричной системе счисления. Можно также задать значения black, red. green или же попросту указать rgb(24, 74, 64). Все методы сработают.
  • border – radius – параметр, отвечающий за небольшое закругление, вокруг кнопки по краям, в моём случае, это 10 пикселей.
  • color – иногда в моей голове случаются сильные конвульсии и я зачастую путаю color с background-color, а так, этот параметр меняет цвет текста или какого-либо символа.
  • font-size – один из параметров, меняющих размер шрифта, указывается в таких значениях как пиксели (px) или же пункты (pt).
  • text-align – параметр отвечающий за положение текста, слева (left), справа (right), по центру (center), по ширине (justify).
  • padding-top – параметр отвечающий за отступы, в данном случае отступ сверху на 7,5 пикселей. Это своего рода некоторый костыль, который выравнивает положение текста посредине блока.
  • cursor: pointer – параметр, служащий для изменения курсора при наведении.
  • font-family – и собственно ещё один из параметров, отвечающих за шрифт. К слову, impact является одним из стандартных шрифтов WINDOWS, однако зачастую отсутствующий на телефонах с операционной системой android.
  • Следующим этапом, следует убрать подчеркивание текста в кнопке, которое появиться если вы пропишите атрибут HREF в ссылке (А).

Именно этот кусок текста, следует вставить после параметров класса BUTTON или же перед ним. Свойство, что прописано в этом классе, отключает подчеркивание кнопки, что собственно нам и нужно.

Простое изменение тональности цвета


Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.

Основной код CSS

Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.

#button2 {
  background: #d11717;
  border: 2px solid #eee;
  height: 38px;
  width: 125px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 38px;
}

Эффекты CSS3

Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.

  /*Скругленные углы*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  
  /*Градиент*/
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  
  /*Тень*/
  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

Анимация практически не отличается от предыдущего примера.

  /*Переход*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;

Наведение курсора мыши

При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.

#button2:hover {
  background-color: #ff3434;
}

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Шаг 4. Свечение

Как я и обещал наша кнопка будет светиться. Поэтому мы сейчас и добавим это самое свечение.

Создайте выделение шара, нажав на слой с шаром с зажатым CTRL. Создайте новый слой и на нем на краю шара нарисуйте белой мягкой кистью как показано на рисунке.

Отменяем выделение (CTRL+D). Пододвигаем слой с белым пятном немного вправо и вниз. Это можно сделать тянув слой по диагонали с зажатым SHIFT. Тогда получиться ровно.

Делаем копию слоя и отражаем его по горизонтали. Перемещаем в верхний левый угол.

Результат махинаций такой:

Но это еще не все. Будет красивее если мы добавим светящхся точек вокруг шарика.

Для этого возьмите белую мягкую кисть и примените к ней следующие настройки кисти:

Динамика формы (Shape Dynamics)

Рассеивание (Scattering)

Другая динамика (Other Dynamics)

Функция Сглаживания (Smoothing) пусть будет включена.

Кисть готова и можно её нарисовать вокруг шарика точки.

Сдвиг фонового изображения


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

Основной код CSS

Основная часть кода не отличается от предыдущих примеров

Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0»

При наведении курсора положение сдвигается по вертикали.

#button3 {
  background: #d11717 url('bkg-1.jpg');
  background-position: 0 0;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  font-size: 22px;
  height: 58px;
  width: 155px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 58px;
}

Эффекты CSS3

В данном примере нет ничего особенного — скругленные углы и тени.

  /*Скругленные углы*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
  /*Тень*/
  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.

  /*Переход*/
  -webkit-transition: All 0.8s ease;
  -moz-transition: All 0.8s ease;
  -o-transition: All 0.8s ease;
  -ms-transition: All 0.8s ease;
  transition: All 0.8s ease;

Наведение курсора мыши

Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.

#button3:hover {
  background-position: 0px 150px;
}

С этим читают