Css генератор bootstrap кнопки

Онлайн-генератор CSS-свойств Uipapade

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

1.Прежде всего, мы видим здесь кнопку, для которой мы можем задать какой-то свой текст, к примеру, «Заказать».
2.Далее, вы можете при помощи ползунков регулировать внутренний отступ, то есть от границы блока до начала текста.
3.Так же можно менять размер шрифта, скругление углов, размер границы, внутреннюю и внешнюю тень.
4.Далее, чуть ниже идет три блока «Normal State», «Hover State», «Pressed State». То есть, это как бы три типа событий, которые могут происходить с данной кнопкой.

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

О том, как определять цвета на сайте я делала отдельную статью, с которой вы можете ознакомиться по этой ссылке:Как определить цвет на сайте
6.Так же вы можете изменить цвет тени текста и цвет границы.
7.Далее, вы можете сделать, что бы ваша кнопка была не просто однотонной, а градиентной. Для этого сначала задаем цвет для верхней части градиентного перехода, а затем для нижней части.

Если вам нужно сделать, что бы кнопка была без градиента, просто однотонная, значит, вы для верхнего и для нижнего градиента просто задаете одинаковый цвет. Это можно сделать так же, при помощи копирования шестнадцатеричного кода цвета.
8.Далее, вы все то же самое проделываете для состояния кнопки при наведении. Можете изменять здесь цвет текста, при необходимости, цвет тени текста, границу, и к примеру, цвет самой кнопки на более темный.
9.Последнее состояние, это состояние при нажатии. Аналогичным образом либо дублируете все параметры, которые у вас идут, к примеру, для эффекта при наведении, или нормального состояния, либо же задаете здесь какие-то другие цвета.
10.После того, как вы задали все настройки, чуть ниже у вас есть две кнопки «Generate HTML» и «Generate CSS».

Если мы нажмем на кнопку «Generate HTML», то мы увидим, что нашу кнопку представляет собой просто обычную ссылку с классом button.

То есть первое, что нам нужно сделать, это взять и скопировать html-код, а затем перейти на свой сайт и добавить сюда этот код.
11.После этого вам обязательно нужно будет еще скопировать css-стили. Для этого возвращаемся снова к нашему сервису, и нажимаем здесь на кнопку «Generate CSS».

Как видите, у нас здесь css-код получился довольно таки длинный. Он идет со всевозможными кроссбраузерными префиксами, для того что бы эти свойства адекватно отображались во всех браузерах.
12.Копируем этот код, и затем открываем файл стилей вашей темы. Если ваш сайт работает на WordPress, то вы можете воспользоваться встроенным редактором WordPress. Для этого переходим в админку, и заходим здесь в раздел «Внешний вид» => «Редактор».

Смотрим, что бы был выбран файл «Таблица стилей (style.css)».
13.Прокручиваем в самый низ и вставляем скопированные css-свойства. После чего нажимаем на кнопку «Обновить файл».
14.Далее, сохраняем изменения на странице с кнопкой и смотрим, как она выглядит.

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

Для этого в css-коде, который мы с вами скопировали нужно найти свойство color, и затем написать перед точкой с запятой !important. После этого обновляем файл.

Аналогичным образом вы можете создавать здесь стили для уже существующей кнопки или ссылки. В этом случае вы при помощи этого визуального редактора задаете все необходимые параметры, затем нажимаете на кнопку «Generate CSS», копируете код, а вместо класса button подставляете в код тот класс ссылки, который используется на вашем сайте.

То есть, к примеру, у вас на сайте есть ссылка с классом call-back или order, или еще какая-то, то вы вместо button просто здесь название вашего класса. Точно так же нужно заменить название класса для эффекта при наведении, и точно так же для эффекта при нажатии.

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

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>

Вариант 4:

Кнопка button

.atuin-btn {
display: inline-flex;
margin: 10px;
text-decoration: none;
position: relative;
font-size: 20px;
line-height: 20px;
padding: 12px 30px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
font-family: ‘Roboto’, Тahoma, sans-serif;
background: #337AB7;
cursor: pointer;
border: 2px solid #BFE2FF;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
color: #FFF;
}
.atuin-btn:before,
.atuin-btn:after {
content: «»;
border: 4px solid transparent;
position: absolute;
width: 0;
height: 0;
box-sizing: content-box;
}
.atuin-btn:before {
top: -6px;
left: -6px;
}
.atuin-btn:after {
bottom: -6px;
right: -6px;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
width: calc(100% + 4px);
height: calc(100% + 4px);
border-top-color: #337AB7;
border-right-color: #337AB7;
transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after {
width: calc(100% + 4px);
height: calc(100% + 4px);
border-bottom-color: #337AB7;
border-left-color: #337AB7;
transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

.atuin-btn {

displayinline-flex;

margin10px;

text-decorationnone;

positionrelative;

font-size20px;

line-height20px;

padding12px30px;

color#FFF;

font-weightbold;

text-transformuppercase;

font-family’Roboto’,Тahoma,sans-serif;

background#337AB7;

cursorpointer;

border2pxsolid#BFE2FF;

}
.atuin-btn:hover,
.atuin-btn:active,

.atuin-btn:focus {

color#FFF;

}
.atuin-btn:before,

.atuin-btn:after {

content»»;

border4pxsolidtransparent;

positionabsolute;

width;

height;

box-sizingcontent-box;

}

.atuin-btn:before {

top-6px;

left-6px;

}

.atuin-btn:after {

bottom-6px;

right-6px;

}
.atuin-btn:hover:before,
.atuin-btn:active:before,

.atuin-btn:focus:before {

widthcalc(100%+4px);

heightcalc(100%+4px);

border-top-color#337AB7;

border-right-color#337AB7;

transitionwidth0.2sease-out,height0.2sease-out0.2s;

}
.atuin-btn:hover:after,
.atuin-btn:active:after,

.atuin-btn:focus:after {

widthcalc(100%+4px);

heightcalc(100%+4px);

border-bottom-color#337AB7;

border-left-color#337AB7;

transitionborder-color0sease-out0.4s,width0.2sease-out0.4s,height0.2sease-out0.6s;

}

На практике

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

Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.
Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p> уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.
Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head>, сразу после элемента <title>.
Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet.
Мы также включим ссылку на наш файл main.css используя атрибут href. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css.

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

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

История дизайна кнопок для сайта с 2009 года по наши дни

Кнопки для сайтов призывают к действию (Call To Action), а также выступают в роли дизайнерского и навигационного элемента. Кнопки для веб-сайтов и приложений можно встретить повсюду – при входе в профили в соцсетях, при оформлении заказов в интернете, отправке сообщений через форму обратной связи и т. д.

Рекомендуемые статьи по данной теме:

Что такое лид-магнит и как его создать
СTА-элементы, которые привлекут в 2 раза больше клиентов
Разработка дизайна сайта: от выбора стиля до получения макета

Далее в статье вы увидите, каким был дизайн кнопок для сайтов и приложений почти 10 лет назад. Дизайнерские тренды постепенно менялись – вместе с ним менялся и дизайн кнопок для сайта. Мы собрали самые яркие примеры, начиная с 2009 года. Все скриншоты взяты из известной тематической социальной сети Dribbble, которая была запущена в том же 2009 году.

2009 год

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

2010 год

Именно в этом году появилась популярнейшая соцсеть Instagram. Изменения практически не коснулись формы кнопок веб-сайтов, однако в их дизайне появилось намного больше цветовых решений и разных элементов (например, внутренних теней). Что касается типографики на сайте, она стала более декоративной.

2011 год

В этом году презентовали CCS3, а количество пользователей всемирной паутины превысило 1 млрд. Множество дизайнеров все еще следуют скевоморфизму и довольно нестандартно развивают данное направление. Согласно скевоморфизму, элементы интерфейса имитируют объекты реальной действительности. Трудно понять, каким правилам следует разработчики, когда создают тени и световые эффекты, но отражены они почти в каждом проекте.

2012 год

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

2013 год

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

2014 год

Произошел релиз популярного Material Design от Google, однако многие мастера не стали использовать этот стиль в полном объеме. Также 2014 год ознаменовался возникновением плоских и прозрачных вариантов кнопок для сайтов, двухпиксельных рамок и всевозможных цветов.

2015 год

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

2016 год

Дизайнеры хотят чего-то нового, а потому соединяют Flat и Material Design. Дизайн кнопок для сайта претерпевает изменения – появляются цветные тени и подсветки. При этом многие кнопки оформляют при помощи градиента, чтобы не выделять третье измерение, но подчеркивать при этом материал объектов.

2017 год

На дизайн кнопок для сайта в 2017 году существенно влияет минимализм. При этом веб-мастера все еще ищут новые формы. Строгие технологические лимиты отсутствуют. Ограничения на дизайн накладывают лишь тренды и модные веяния.

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

Не исключено, что в будущем дизайн кнопок станет вопросом, утратившим свою актуальность. Интерфейсы непрерывно эволюционируют, а потому вполне могут перестать быть востребованными. Мы видим, как в данный момент все больше набирает обороты управление при помощи жестов, интуитивного взаимодействия, VR и проч.

Вас также может заинтересовать: СTА-элементы, которые привлекут в 2 раза больше клиентов

10 моментов, которые стоит учесть, создавая дизайн кнопок для сайта

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

Главный акцент в дизайне должен быть сделан на основном или наиболее важном действии юзера.

Кнопки должны соответствовать контексту.

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

При использовании в интерфейсе преимущественно плоских цветов не стоит создавать дизайн больших блестящих кнопок для сайта в стиле Apple. Создавая интерфейс, применяйте дизайн логотипа, пользуйтесь соответствующими формами, цветами и другими видами украшений.

Скрывайте второстепенные элементы.

Помните, что детали, имеющие второстепенное значение, не должны бросаться в глаза. Речь в данном случае идет об элементах меню, контроллерах, различных бегунках. Эти элементы, в частности, могут иметь одинаковые углы (один радиус), но разные тени, границы и градиенты и т. д.

Аккуратно используйте размытые тени.

Создавая дизайн кнопок для сайта, многие веб-мастера применяют в работе «Закон Теней», согласно которому любые тени оказывают лучший эффект, когда элемент светлее фона

Если же элемент темнее, чем фон, тени следует использовать осторожно.. Не забывайте о первичных, вторичных и третичных элементах

Не забывайте о первичных, вторичных и третичных элементах.

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

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

Остерегайтесь призрачных кнопок.

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

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

Не используйте текст в виде «ОК».

Разрабатывая дизайн кнопок для сайта, мастера часто применяют надписи «OK», «Cancel», «Да», «Нет» и т.п. Если вы – пользователь ПК, то видите такие кнопки ежедневно. Но такого рода кнопки не имеют никакого отношения к действию, совершаемому пользователем. CТА для ясности и убедительности следует увязывать с действием, которое юзер хочет или собирается выполнить.

Лучшее место для расположения конверсионных кнопок – правая нижняя часть страницы.

Чтобы аргументировать это утверждение, демонстрируем вам диаграмму Гутенберга. Глядя на нее, вы понимаете, что страница сайта делится на 4 части. Стрелки показывают, как двигается пользователь

Основное его внимание сосредоточено на верхнем левом и правом нижнем квадрантах страницы. На нижний левый квадрант посетитель практически не смотрит

В связи с этим конверсионные кнопки всегда лучше располагать внизу справа.

Кнопку желаемого действия в диалоговых окнах лучше помещать в правой части.

Кнопки желаемого действия, например «Купить», «Оформить» и т. д. лучше располагать в правой части, поскольку там они работают более эффективно. Взгляните на этот скриншот:

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

Чтобы юзер остановил свой выбор на варианте «Да», то должен вернутся к этой кнопке после изучения других вариантов.

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

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

Оставить заявку