Онлайн кнопка css: Как сделать кнопкe css и кнопку html в генераторе. Примеры кнопок

Содержание

Создание кнопок для сайта

Добрый день. Вчера я рассказывал про онлайн сервис для создания кнопок. Там произошло небольшое недоразумение, и я обещал, что сегодня подробно опишу создание кнопок для сайта, без всяких сервисов на чистом CSS.

CSS создание кнопки актуально еще и потому, что несколько строчек кода весят куда меньше, чем картинка. Даже использование спрайтов лучше исключить в тех местах, где можно задать стиль элементу только при помощи CSS.

Вообще, почему я так много уделяю внимания быстрой загрузки сайта? Да потому, что при прочих равных условиях, в выдаче будет первым тот, который быстрее грузится. Но для лендинг пейдж – это не очень важно, ведь СЕО продвижение посадочных страниц в топ 10 – очень дорогое удовольствие. А кроме того, сложное и затратное по времени.

Поэтому, на лендинг пейдж, трафик, в основном, идет не с поисковой выдачи, а с разных рекламных площадок. (Яндекс Директ, GoogleAdwords, Баннеры и т.д.)

В скором времени, я обязательно расскажу вам о том, как при помощи разных площадок для рекламы привлечь трафик на свою посадочную страницу.

Но если тема вашего сайта предполагает посещение людей с мобильных устройств, то скорость загрузки приземляющей страницы может стать проблемой для комфортной работы с ней. Ведь никому не нравиться долго ждать, пока страница загрузится. Что-то я отвлекся от темы. Приступим…

Будем делать такую кнопку c эффектом нажатия, при наведении.

На этом этапе, нам необходимо написать html разметку кнопки. Для этого существует специальный парный тег «button».

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

Если вы используете кнопку в форме обратной связи, то необходимо задать тип “submit”:

Это связано с тем, что раньше разные браузеры обрабатывали элемент button по-разному. Internet Explorer передавал текст между тегами “button”, а Mazilla – передавала то, что было прописано в атрибуте “Value”. Сейчас ситуация изменилась. Но все же я рекомендую писать так:

Для того, чтобы кнопка понимала к какой форме она привязана, необходим элемент “form” и в нем должен быть задан идентификатор формы:

<form>
<button type=»submit»> ПОЛУЧИТЬ ПРАЙС </button>
</form>

Давайте теперь присвоим идентификатор кнопке для того, чтобы ей можно было задать уникальный стиль, в случае если на странице кнопок несколько, и они все разные:

<button type=»submit» form=»zayavka»> ПОЛУЧИТЬ ПРАЙС </button>

Теперь добавим стили нашей кнопки.

Создание кнопок для сайта – CSS разметка

Сначала создадим общий вид, а потом добавим пару строк кода, для эффекта при наведении и сымитируем эффект нажатия.

Поехали…

#firstButton {
display: block; /* Переводим в блочный элемент*/
margin:0 auto; /* Выравниваем по центру */
width: 300px; /* Задаем ширину */
height: 40px; /* Задаем высоту */
border: none; /* Убираем обводку */
background: #188B12; /* Задаем цвет кнопки */
color:#fff; /* Задаем цвет текста */
font:bold 15px ‘Arial’, sans-serif; /* Жирность, Размер, Шрифт */
cursor: pointer; /*Курсор меняется на пальчик, при наведении*/
box-shadow: 0 4px 0 #11620D; /*Задаем тень — х, у, размытие, цвет*/
border-radius: 3px; /*Скругление углов*/
}

Думаю, подробнее вряд ли получиться, но если нужна будет помощь, обязательно пишите в комментариях – помогу.

Теперь добавим стили для кнопки, которые будут применяться при наведении на нее курсора. Создадим эффект нажатия.

#firstButton:hover{
margin-top: 2px; /*опустим кнопку на 2 пикселя*/
box-shadow: 0 2px 0 #11620D; /*Делаем меньше тень на 2 пикселя*/
}

Можно сделать так, чтобы кнопка плавно меняла цвет:

#firstButton:hover{
transition: .5s; /* Скорость изменения цвета */
background: #F96400; /* Задаем цвет кнопки */
box-shadow: 0 4px 0 #BB4A00; /*Задаем тень — х, у, размытие, цвет*/
}

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

А на сегодня — все. Теперь, создание кнопок для сайта у вас не должно вызывать никаких проблем. До встречи на smartlanding

как правильно настроить размер области клика

У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?

Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:

В этой статье, мы рассмотрим несколько распространённых проблем с UX, а в конце покажем наглядный пример с нашего сайта.

UX-решения

Закон Фиттса

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

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

Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.

Кнопки

При необходимости можно использовать элемент <button>. Рассмотрим этот случай на существующей системе интернет-банкинга:

<div>Next</div>

Вот так выглядит эта кнопка:

При наведении курсора на кнопку он всё ещё выглядит, как указатель, и это нормально. Но если выделить текст, то появляется текстовый курсор. Такого не случится, если использовать правильные элементы.

Благодаря HTML-элементу <button>, пользователь сможет:

выбирать кнопку с помощью клавиатуры;
нажимать на кнопку с помощью мыши, клавиатуры или касания.

Кроме того, его можно реализовать без JavaScript.

Кнопкам нужны внутренние отступы, и вот почему:

тексту не должно быть «тесно»;
большую кнопку проще заметить (Закон Фиттса).

Ссылки

Эта ошибка встречается в интернете довольно часто. Если перед вами меню навигации,

padding должен быть у элемента <a>, а не <li>.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><nav href="#">Products</nav></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Team</a></li>
  </ul>
</nav>

. nav-item {
  padding: 12px 16px;
}

С таким кодом кликнуть можно будет только на текст:

Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы. Для этого можно использовать block, inline-element

или flex.

.nav-item a {
  display: block;
  padding: 12px 16px;
}

Теперь вся область ссылки станет доступна для клика:

Гамбургер-меню

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

Предположим, что так выглядит область нажатия:

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

Можете попробовать самостоятельно в этом демо.

Чекбоксы и радио-кнопки

При наличии чекбокса или радио-кнопки пользователь ожидает, что он сможет нажать на него или связанный с ним текст.

На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:

Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for:

<input type="checkbox">
<label for="option1">Option 1</label>

Или поместить input внутрь label:

<label for="option1">
    Option 1
    <input type="checkbox">
</label>

После нужно добавить padding для <label>, чтобы область клика стала больше:

Сайдбар

Часто на страницах с категориями кликабельная область ссылок не распространяется на всю ширину элемента списка. Это происходит потому, что область клика находится только на текстовом элементе:

Чтобы исправить эту ситуацию, нужно:

Удалить отступ из элемента <li> и переместить его в элемент <a>, как в пункте «Ссылки».
Добавить display: block.

.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

После того, как будут выполнены эти действия, получим:

Примеры

В недавнем обновлении Твиттера появилась проблема с навигационным дизайном, связанная с размером кликабельной области. Сначала она была ограничена только текстом, как на скриншоте ниже, но после получения обратной связи её исправили:

Заголовок раздела

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

Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.

Использование псевдоэлементов для увеличения области клика

Не всегда возможно сделать кликабельную зону больше просто за счёт изменения ширины и высоты элемента или отступа. В этом случае на помощь приходят псевдоэлементы.

Как это работает?

Идея в том, что псевдоэлементы принадлежат своему родителю, поэтому, когда мы создаём такой элемент с определённой шириной и высотой, он будет вести себя как область клика/касания/наведения своего родителя.

Ниже псевдоэлемент :after добавлен к кнопке меню:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

Квадрат 55px специально расположен справа от элемента для наглядности.

Смотрите гифку ниже или попробуйте демо на Codepen.

Пример с нашего сайта

Недавно мы обнаружили на нашем сайте проблему: при попытке нажать на лайк с телефона на главной странице происходит переход на статью. Разобравшись в вопросе, оказалось, что рекомендуемый размер элемента для клика на touchscreen 48×48 dp. Иначе по нему сложно попасть на мобильных.

Чтобы решить эту проблему, нужно увеличить площадь клика за счёт паддингов, но при этом сохранить визуальное расположение элементов.