Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

Стили для кнопок css: Примеры. Стили кнопок CSS

Добавлено автор alexxlab

Содержание

Кнопки CSS. Преимущества. Стили. Эстетичность

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

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

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

CSS, что это

CSS, означающее в переводе «каскадные таблицы стилей», на сегодняшний день является одной из основных технологий в интернете. Без этого языка вряд ли обойдется хоть один сайт.

CSS-код — это инструкции для браузеров, содержащие информацию, как отображать элементы на странице и где это делать.

Удобно хранить такие инструкции в отдельном файле, имеющем расширение . css. С другой стороны, можно их поместить и в начале html-документа.

Кнопка на сайт. Какая она бывает

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

Кнопки бывают статичные, анимированные, динамичные, со звуком и без него.

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

Кнопки CSS

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

Как известно, у кнопок есть три положения:

  • покоя, когда с ней ничего не делают, а просто просматривают страницу;
  • положения, с наведенным на нее курсором;
  • и активации при нажатии.

В полной мере кнопки точно отобразятся в таких браузерах, как Firefox, Safari, Opera, Chrome. В то же время в Internet Explorer 9 кнопки не смогут отобразиться в полной мере. Например, закругления углов, тень текста и обводка вокруг кнопки не будут видны здесь из-за того, что такие свойства не поддерживаются этим браузером. Тем не менее, в целом CSS-кнопки для сайта выглядят достойно в этой версии браузера. В Internet Explorer 8 и других версиях ниже восьмой у кнопки не будет видна объемность, но, в то же время, сохранится видимость градиентов.

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

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

Для каждого положения задается свой стиль. Эти стили прописываются в специальном файле .css или между тегами head в самой странице сайта.

Место кнопки на сайте

Между тэгами body записывается код:

где

id=”button2” здесь означает имя, присваиваемое кнопке,

href=”ГИПЕРССЫЛКА” здесь дается непосредственная ссылка на необходимый документ,

ТЕКСТ — печатается текст, который будет отображаться на кнопке.

Стили для кнопок

1. Стиль кнопки CSS записывается отдельно в документе или в самой странице:

2. Вначале записываются кнопки CSS, когда они находятся в покое:

3. Далее записываются параметры, соответствующие кнопке, когда на нее наводят курсор. Если в данном случае изменяется только цвет и заливка, то и в стиле все остается прежним, кроме цвета и заливки:

4. И последний параметр касается положения кнопки, когда нажимается на нее курсор. Часто в таких случаях меняется лишь минимум, например, цвет, как и в этом случае:

CSS — красивые кнопки

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

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

Этими параметрами служат:

— цвет текста на кнопке;

— размер текста и кнопки;

— цвет градиента кнопки;

— радиус углов кнопки;

— и цвет ее обводки.

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

Как создать красивые анимированные кнопки при помощи CSS3

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

Итак, давайте начнем.

Шаг 1: Начнем с HTML


HTML-код довольно простой, мы создадим 2 ссылки с классом «button» и двумя классами для различных цветов — «green» и «red«.

<a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

Шаг 2: Основные CSS-стили


Теперь мы создадим стили для HTML-кода, который мы уже написали. Класс «button

» создает форму и стиль кнопок.

 .button {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-weight: bold;
 color: #FFFFFF;
 padding: 10px 75px;
 margin: 0 20px;
 text-decoration: none;
}

Ниже приведены классы для кнопок с разными цветами.

 .green {
 border: solid 1px #3b7200;
 background-color: #88c72a;
}

.red {
 border: solid 1px #720000;
 background-color: #c72a2a;
}

Предварительный просмотр:

Шаг 3: CSS3-стили


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

 .button {
 font-family: Helvetica, Arial, sans-serif;

 font-size: 18px;
 font-weight: bold;
 color: #FFFFFF;
 padding: 10px 75px;
 margin: 0 20px;
 text-shadow: 2px 2px 1px #595959;
 filter: dropshadow(color=#595959, offx=1, offy=1);
 text-decoration: none;
}

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

 .square {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.rounded {
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}

Теперь наш HTML-код будет выглядеть так:

 <a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

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

 .green {
 border: solid 1px #3b7200;
 background-color: #88c72a;
 background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);
 background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);
 background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%);
 background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#709e0e’, endColorstr=’#709e0e’,GradientType=0 );
 background: linear-gradient(top, #88c72a 0% ,#709e0e 100%);
 -webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
 -moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
 box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
}

. red {
 border: solid 1px #720000;
 background-color: #c72a2a;
 background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
 background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
 background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
 background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#9e0e0e’, endColorstr=’#9e0e0e’,GradientType=0 );
 background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
 -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
 -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
 box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}

Предварительный просмотр:

Шаг 4: Стили для кнопки в различных состояниях


При наведении курсора мыши или нажатии на кнопку мы изменим цвета и градиент фона для различных цветовых (green, red) классов.

 .
green:hover {
 background-color: #7fb52f;
 background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);
 background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);
 background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%);
 background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#67910b’, endColorstr=’#67910b’,GradientType=0 );
 background: linear-gradient(top, #7fb52f 0% ,#67910b 100%);
}

.green:active {
 background-color: #638f22;
 background: -moz-linear-gradient(top, #638f22 0%, #486608 100%);
 background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%);
 background: -o-linear-gradient(top, #638f22 0%, #486608 100%);

 background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#486608′, endColorstr=’#486608′,GradientType=0 );
 background: linear-gradient(top, #638f22 0% ,#486608 100%);
}

. red:hover {
 background-color: #b52f2f;
 background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
 background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
 background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
 background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#910b0b’, endColorstr=’#910b0b’,GradientType=0 );
 background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
}

.red:active {
 background-color: #8f2222;
 background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
 background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
 background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
 background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#660808′, endColorstr=’#660808′,GradientType=0 );
 background: linear-gradient(top, #8f2222 0% ,#660808 100%);

}

Предварительный просмотр:

Шаг 5: CSS3-анимация


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

 .effect-2 {
 transition: border-radius 2s;
 -webkit-transition: border-radius 2s;
 -moz-transition: border-radius 2s;
 -o-transition: border-radius 2s;
 -ms-transition: border-radius 2s;
}

.effect-2:hover {

 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}

.effect-3 {
 transition: border-radius 1s;
 -webkit-transition: border-radius 1s;
 -moz-transition: border-radius 1s;
 -o-transition: border-radius 1s;
 -ms-transition: border-radius 1s;
}

.effect-3:hover {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

Теперь наш HTML-код выглядит следующим образом:

 <a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

Шаг 5: Создаем разные фигуры


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

 .shape-1 {
 -webkit-border-radius: 5px 50px 5px 50px;
 border-radius: 5px 50px 5px 50px;
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 50px;
 -moz-border-radius-bottomleft: 50px;
 -moz-border-radius-bottomright: 5px;
}

.shape-2 {
 -webkit-border-radius: 50px 5px 50px 5px;
 border-radius: 50px 5px 50px 5px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 50px;
}

А вот стили для дополнительных эффектов и анимации.

 .effect-4 {
 transition: border-radius 1s;
 -webkit-transition: border-radius 1s;
 -moz-transition: border-radius 1s;
 -o-transition: border-radius 1s;
 -ms-transition: border-radius 1s;
}

.effect-4:hover {
 border-radius: 50px 5px 50px 5px;
 -webkit-border-radius: 50px 5px 50px 5px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 50px;
}

. effect-5 {
 transition: border-radius 1s;
 -webkit-transition: border-radius 1s;
 -moz-transition: border-radius 1s;
 -o-transition: border-radius 1s;

 -ms-transition: border-radius 1s;
}

.effect-5:hover {
 border-radius: 5px 50px 5px 50px;
 -webkit-border-radius: 5px 50px 5px 50px;
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 50px;
 -moz-border-radius-bottomleft: 50px;
 -moz-border-radius-bottomright: 5px;
}

Теперь изменим HTML следующим образом:

 <a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

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

Здесь вы можете увидеть эти кнопки в действии. Кроме того, вы можете скачать исходные файлы, так что вы можете редактировать и использовать их как вам угодно.

Демонстрация

Исходный код

Перевод статьи с www.instantshift.com


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

10 бесплатных сниппетов CSS для создания красивых кнопок

Веб-дизайнерам сегодня не обязательно обращаться к Photoshop для создания красивых кнопок. С CSS3 можно манипулировать всем: от фонового градиента до тени, придавать кнопкам глянцевости или других степеней блеска.

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

1. Пластиковые кнопки

See the Pen CSS3 Buttons by Benjamin (@ben_jammin) on CodePen.

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

2. Cool Buttons

See the Pen Google Buttons by Tim Wagner (@timwagner) on CodePen.

Набор классные кнопок, немного отличающихся внешне от «пластиковых». Также просты в применении. Нет сияющего пластика в дизайне, но красиво реализован «push» эффект при клике. Из 6 заранее разработанных сценариев, можно выбрать цвет или  кастомиизировать на свой вкус. CSS разделен на различные классы, что позволяет установить стиль кнопок по умолчанию одним классом, а альтернативный использовать для цвета.

3. Google кнопки

See the Pen Google Buttons by Tim Wagner (@timwagner) on CodePen.

В продуктах Google (Blogger, Drive или Gmail) кнопки имеют свой отличительный цвет. В наборе: эффектные гугл-подобные кнопки на чистом CSS3.

4. Bunch-o-Buttons

See the Pen EwDar by Alan Collins (@AlanCollins) on CodePen.

Еще один пример глянцевого пластик-стиля от CodePen. Особенности кнопок в наборе: мульти-цветность с отличиями для малых, средних и больших размеров. Уникальная реализация переключений с глянцевости на flat в одном классе.

5. Социальные кнопки

See the Pen CSS social buttons and icons by Stan Williams (@Stanssongs) on CodePen.

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

6. Jelly анимация кнопки

See the Pen Jelly button by ayamflow (@ayamflow) on CodePen.

На первый взгляд обычна кнопка, но реагирует на клик очень специфичной анимацией. Помимо занимательного эффекта, впечатляет полуреалистичность тени. Меняя размер вслед за кнопкой, тень дополнительно подчеркивает действие пользователя, усиливая обратную связь. Подойдет для проекта с Call-to-Action, вроде стартапа или соц. медии.

7. Parallax кнопки

See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.

Впечатляющий CSS3-дизайн с использованием радиальных градиентов и довольно безумных оттенков. Фон, тени созданы исключительно на CSS. JavaScript добавили лишь для параллакс эффекта деформации. Это один из самых крутых примеров эффектно анимированной кнопки.

8. Hubspot пилюли

See the Pen Hubspot Red Pill — Blue Pill inset click buttons by Joe Henriod (@joehenriod) on CodePen.

Разработчик создал кнопку, вдохновившись стильным Hubspot дизайном. По функционированию она напоминает традиционные HTML-кнопки и построена на CSS классах, легко применяемых к любому элементу. Выбраны красный & синий цвета для 2 кнопок, напоминающих по форме пилюли – прямо как в Матрице. Вычурный стиль hover-эффекта просто цепляет внимание.

9. Кнопки в стиле Sexy

See the Pen Sexy SCSS buttons in HSB by Jeremy Thomas (@jgthms) on CodePen.

Большинство фронтэнд кодеров используют Sass/SCSS, т.к. это дает больший контроль и намного проще обычного CSS. Красивые SCSS-кнопки впечатляют своей детализацией с внутренними и внешними эффектами тени. Вы можете сменить цвет в одном классе или внести в сочетание свой оттенок. В  hover состоянии кнопки выглядят как 3D, также как и при нажатии. Легко использовать для любого типа сайта и вообще можно конвертировать SCSS в CSS прямо в CodePen.

10. Кнопки в стиле Mozilla

See the Pen Single Element Mozilla-Buttons by Felix Schwarzer (@slimsmearlapp) on CodePen.

Mozilla провела основательный ребрендинг, сменив традиционно «пластиковый» стиль кнопок на своем сайте. Но вы можете украсить этими стилизованными по максимуму кнопками свой веб-ресурс. Красивые конус-формы реализованы полностью на CSS3: с фоновым градиентом и эффектом 3D фаски.

Больше стильных CSS3 кнопок

Рассмотренные 10 видов кнопок вы сможете кастомизировать в разных лейаутах. Они созданы на чистом CSS3: можно менять размер, цвет и стиль. Эти кнопки впишутся в современный проект, будь он бизнес / блоговой / соц. медиа или eCommerce тематики.

Если вы не нашли подходящий вариант для своего сайта, больший выбор красивых кнопок на CSS3 предоставит CodePen.

Кнопки CSS3 — творческие стили 30+ кнопок!

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

Главным образом, мы используем css переходы (transitions), но присутствуют также и CSS анимации. И мы используем немного JavaScript, но только для того, чтобы добавить / удалить класс с эффектами.

Иконки, которые мы добавляем с использованием псевдо-класса :before (а иногда :after), взяты с сервиса IcoMoon.

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

Итак, давайте посмотрим на некоторые моменты красивых кнопочек css, которые мы создаем.

HTML&CSS3 кнопки

Разметка кнопки действительно очень проста. Мы просто добавить конкретные общие классы:

<button>Button</button>

Общих класс .btn для всех кнопок, который сбрасывает все стили по умолчанию, и далее мы используем конкретные пронумерованные классы для различных наборов стилей. Второй класс btn-6 это общий класс для определенной группы кнопок со стилями.

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

Например, вот стили конкретной кнопки:

/* Кнопка 6d */

. btn-6d {

    border: 2px dashed #226fbe;

}

.btn-6d:hover {

    background: transparent;

    color: #226fbe;

}

Какие, конечно, зависит от того, что мы определяем в общих стилях .btn и .btn-6.

Это классовая структура кнопок используется для демонстрационных целей. При использовании какой-то кнопки на своем сайте, лучше конечно объединить стили.

Надеюсь Вам понравилось, и Вы ещё раз убедились, что с CSS3 можно сделать много чего! Практикуйте, используйте и я надеюсь, Вам пригодятся эти современные кнопки на css3! Успехов!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко

Как настроить кнопку отправки с помощью CSS

ОБНОВЛЕНИЕ: попробуйте видеокурс Form Designer, чтобы создать фантастические стили кнопки «Отправить»!

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

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

Ввести собственный CSS

Щелкните значок Form Designer . Затем перейдите на вкладку Стили и вставьте следующий код CSS или свои собственные коды CSS:

.form-submit-button {
background: # 0066A2;
цвет: белый;
border-style: начало;
цвет границы: # 0066A2;
высота: 50 пикселей;
ширина: 100 пикселей;
шрифт: полужирный, 15 пикселей, без засечек;
тень текста: нет;
}

Вот как это будет выглядеть потом:

Подробная информация о CSS-коде для кнопки отправки

  • . form-submit-button — селектор для кнопки отправки в вашей форме.
  • фон — устанавливает цвет фона за текстом.
  • цвет — определяет цвет вашего текста.
  • стиль границы — устанавливает стиль границ кнопки отправки.
  • border-color — устанавливает цвет границ вашей кнопки отправки.
  • высота — устанавливает высоту вашей кнопки и указывается в пикселях.
  • width — устанавливает ширину вашей кнопки и указывается в пикселях.
  • шрифт — устанавливает свойства шрифта.

ПРИМЕЧАНИЕ. Не забудьте добавить точку с запятой (;) после каждого свойства.

Кнопка отправки CSS3 и эффект наведения

Следуйте инструкциям по изменению кнопки отправки, как указано выше. Единственное, что меняется, — это код.

Пример CSS3 для кнопки отправки:

.form-submit-button {
background: # B9DFFF;
цвет: #fff;
граница: 1pxsolid # eee;
радиус границы: 20 пикселей;
box-shadow: 5px5px5px # eee;
тень текста: нет;
}
. кнопка отправки формы: наведите указатель мыши {
background: # 016ABC;
цвет: #fff;
граница: 1pxsolid # eee;
радиус границы: 20 пикселей;
box-shadow: 5px5px5px # eee;
тень текста: нет;
}

Вот как это выглядит.

и при наведении на него мышки:

Подробная информация о каждом коде CSS3 для кнопки отправки

  • .form-submit-button: hover — это класс, когда мышь наводится на кнопку отправки. Все остальные поля остаются такими же, кроме фона, чтобы показать, что происходит при наведении курсора мыши.
  • border-radius — закругляет угол кнопок отправки.
  • box-shadow — устанавливает тень для кнопки отправки.
  • text-shadow — устанавливает тень для текста внутри кнопки отправки (не применяется к примеру).

Как дела? Пожалуйста, поделитесь своими мыслями или предложениями в разделе комментариев ниже.

Дизайн кнопок веб-сайта: ваше руководство по CSS

Каждый аспект вашего веб-сайта имеет значение. Мы рассмотрели некоторые из самых важных моментов, от создания форм и дизайна заголовков до показателей трафика, которые отслеживают, кто направляется на ваш сайт, как долго они остаются и возвращаются ли.Не менее важно? Детали. Выбор цвета и компоновка имеют значение. Простота и обтекаемый дизайн — приоритет. Но есть также компонент, на который часто упускают из виду, который не выделяется, когда делается хорошо, но может отвлекать внимание, когда он не попадает в цель: кнопки. Когда пользователи формируют общее впечатление о вашем веб-сайте через 50 миллисекунд после их прибытия, вы не можете позволить себе иметь что-либо неуместное, включая случайную кнопку.

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

Хотите узнать о дизайне кнопок на веб-сайте? Не знаете, как (или где) начать? Мы вас прикрыли.

Хороший и плохой дизайн кнопок

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

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

Хороший дизайн кнопок

  • Clear: Текст и цвета кнопок должны быть четкими, четкими и понятными. Тенденции веб-дизайна за последние несколько лет склонились к дизайну плоских кнопок, так что это безопасный стиль, который стоит попробовать. Избегайте сложных, причудливых кнопок, которые могут отвлекать читателей.
  • Краткий: Минимальный текст на кнопках — идеальный вариант. Одно слово — это цель, максимум два слова. Любое другое становится громоздким и запутанным. Если у вас возникли проблемы с сокращением текста кнопки, сделайте шаг назад и спросите себя: «Что я хочу, чтобы читатель сделал на странице прямо сейчас?» Первое слово, которое приходит на ум, вероятно, будет глаголом.После этого добавьте наречие времени для простого и лаконичного текста кнопки.
  • Контекстный: Куда ведет кнопка? Что оно делает? Запутанные кнопки не нажимаются. Если у вас есть кнопка с надписью «купить сейчас», она должна вести на страницу, где пользователь может ввести данные своей карты, а не на другую страницу, описывающую продукт, который он хочет купить.

Плохой дизайн кнопки

  • Не отвечает: В веб-дизайне мобильные возможности доминируют.Скорее всего, вы будете разрабатывать кнопки на настольном компьютере, поэтому вам придется вручную дважды проверять правильность отображения кнопок и на мобильных устройствах. Если вы не сделаете этого шага, ваши кнопки могут быть слишком большими или слишком маленькими для экрана мобильного устройства, что может существенно повлиять на ваш рейтинг кликов. К счастью, у большинства инструментов CMS есть кнопка переключения, которая дает вам предварительный просмотр элементов вашей веб-страницы на нескольких типах экранов, чтобы вы могли соответствующим образом настроить дизайн кнопок.
  • Без цвета: Яркие жирные кнопки отлично подходят для CTA, потому что они направляют взгляд посетителя на ключевые элементы на странице.Помните, что ваша веб-страница — это путешествие, и кнопки, которые вы размещаете на ней, должны действовать как карта. Без полноцветных кнопок вашим читателям может быть сложно пройти по странице и конвертировать.
  • Неуместны: Неуместные кнопки также могут сбить с толку посетителя. Если ваши кнопки не расположены в области, которая заставляет читателя узнать больше или совершить покупку, одинокая кнопка в середине абзаца не поможет, а может усугубить ситуацию. Делайте вещи проще, добавляя кнопки только там, где вам нужно, чтобы посетитель предпринял действия.Вот некоторые примеры этих областей: рядом с разделом функций и преимуществ, в заголовке страницы и внизу страницы.

Идеи дизайна кнопок

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

Vecteezy

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

Дизайнер также добавил маленькие значки для улучшения контекста — например, кнопка «Воспроизвести видео» имеет небольшой символ «Воспроизвести», а кнопка поиска имеет увеличительное стекло.

Freepik

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

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

Как создать кнопку веб-сайта

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

Ваш лучший выбор для строительства? Дизайн кнопок в CSS (каскадные таблицы стилей). CSS — это инструмент, который определяет и описывает, как элементы отображаются в HTML.Используя редактор CSS, вы можете настроить каждый аспект своей веб-страницы, от верхних и нижних колонтитулов до боковых панелей и кнопок.

Вы можете добавить условия CSS на любой веб-сайт, но разные инструменты требуют разного уровня знаний. Если вы только начинаете, WordPress — беспроигрышный вариант: платформа упрощает доступ, добавление и настройку настроек CSS, а также создание новых кнопок. Вот как.

Шаг 1: Перейдите в панель управления WordPress и нажмите Внешний вид> Настроить.

Источник изображения

Шаг 2: Затем перейдите в нижнюю часть левой боковой панели и щелкните Additional CSS .

Источник изображения

Откроется страница редактора CSS, где вы можете ввести любой собственный код CSS.

Источник изображения

Итак, что вы должны добавить, чтобы создать отличные кнопки? Это зависит от того, что вы ищете.Давайте рассмотрим, как изменить свойства кнопки.

Дизайн кнопок CSS

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

См. Кнопку CSS на веб-сайте Pen от Кристины Перриконе (@hubspot) на CodePen.

Цветные пуговицы

Используйте свойство background-color, чтобы изменить цвет фона вашей кнопки.

См. Цветные кнопки пера Кристины Перриконе (@hubspot) на CodePen.

Закругленные углы

Квадратные углы не всегда идеальны. Используйте свойство border-radius, чтобы изменить радиус границы для закругления углов кнопок — чем больше количество пикселей (или процент), тем более округляются углы.

См. Закругленные углы пера Кристины Перриконе (@hubspot) на CodePen.

Цветные бордюры

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

См. Цветные границы пера Кристины Перриконе (@hubspot) на CodePen.

Кнопки с возможностью подвешивания

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

См. «Кнопки с перемещением ручки» Кристины Перриконе (@hubspot) на CodePen.

Пуговицы тени

Используйте свойство box-shadow, чтобы добавить тени к вашей кнопке.Обратите внимание, что HTML немного изменился, чтобы отобразить тень за кнопкой.

См. Кнопки тени пера Кристины Перриконе (@hubspot) на CodePen.

Отключенные кнопки

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

См. «Кнопки с отключенным пером» Кристины Перриконе (@hubspot) на CodePen.

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

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

1. Hubspot CMS

HubSpot CMS — это универсальный магазин для всего, что вам нужно для создания отличных веб-сайтов. Приобретая ежемесячную подписку, вы получаете доступ к разработке сайтов, которые соответствуют вашим потребностям и привлекают интерес посетителей. Вы можете расширить свою усердную работу, подключив свой сайт к маркетинговым решениям, таким как Marketing Hub от HubSpot, чтобы убедиться, что ваш дизайн со временем будет успешным.Выбирайте из множества готовых шаблонов кнопок и стилей, чтобы придать своему сайту идеальный вид.

2. Wix

Wix — это платная платформа CMS, которая упрощает веб-дизайн благодаря красивым и интуитивно понятным функциям и функциям сайта. Хотя у вас нет полной настройки кнопок с Wix, это хорошая отправная точка, если вам нужны четкие контекстные параметры, которые работают прямо из коробки.

Бесплатные кнопки веб-сайта

3.
WordPress

Кодировать CSS в WordPress легко, и платформа веб-сайта также поставляется с множеством шаблонов и плагинов.Хотя настраиваемые кнопки в WordPress требуют дополнительной работы, стоит подумать, знакомы ли вы с базовым программированием. Поскольку WordPress является открытым исходным кодом, вы можете использовать его бесплатно или можете приобрести тарифный план WordPress для более конкретной функциональности.

4. Лучший генератор кнопок CSS

Best CSS Button Generator — это бесплатный инструмент, который позволяет настраивать внешний вид кнопок вашего веб-сайта. Выберите все, от точного оттенка зеленого в цветовой палитре вашего бренда до тени за текстом на кнопке.Когда вы закончите проектировать. Просто нажмите кнопку «Получить код», чтобы скопировать и вставить свой код CSS в поле «Настроить дополнительный CSS» на своем веб-сайте.

5. Генератор кнопок CSS

Еще одна платформа с аналогичным названием, CSS Button Generator — это бесплатный простой инструмент для создания красивых кнопок CTA. В нем есть все основные функции, которые должны быть у создателя кнопок, но что делает его уникальным, так это возможность настройки при наведении курсора. Это означает, что когда вы используете CSS Button Generator, ваши кнопки будут иметь динамическую функциональность профессионально созданных сайтов.

Нижняя строка кнопки

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

Кнопки — важный элемент фона; Индивидуальный, ясный, лаконичный и контекстный выбор дизайна кнопок может помочь оформить и произвести впечатление на ваш сайт для успеха.

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и был обновлен для полноты.

25 дизайнов и анимаций кнопок CSS 2020 — Bashooka

Главная / Кодирование / 25 дизайнов и анимаций кнопок CSS 2020

Анри —

Являясь одним из важнейших компонентов веб-дизайна, они позволяют нашим пользователям выполнять определенную задачу. Кнопки являются жизненно важным элементом в создании плавного разговора в сети и в приложениях, поэтому важно учитывать их, уделяя внимание таким деталям, как отступы, размер, расположение и доступность.В зависимости от стиля и задач сайта существует множество вариаций внешнего вида кнопки. Если вы ищете вдохновение для создания кнопок CSS, которые сделают ваше приложение популярным во всех нужных местах, вот 25 дизайнов и анимаций кнопок CSS 2020 для вдохновения.

Раскройте потенциал WordPress Объявление

Потрясающая коллекция из 11000+ тем WordPress, включая шаблоны Bootstrap и элементы дизайна

Скачать сейчас

3d кнопка

Кнопка обработки

Кнопка загрузки iOS Safari

Эффекты при наведении курсора на кнопку

Неуморфные кнопки

Кнопка загрузки отказов

Кнопки загрузки

Коллекция кнопок

Кнопки социальных сетей

Удерживайте для подтверждения

Доставка с помощью дрона Отправить CSS-анимацию

Кнопка хлопка лапой

Жидкая кнопка

Радужный свет при наведении курсора

Необычная кнопка взрыва

Кнопка CSS с эффектом наведения

Современные градиентные кнопки

Кнопка градиентного цвета с подсветкой при наведении курсора

Кнопки отправки Вдохновение

Кнопка отправки анимации

Шайни Пуговица

CSS-анимации: очевидные кнопки Cta

Кнопка истории

Кнопка загрузки

Концепция кнопок

кнопка css javascript

Создание улучшенной кнопки в CSS — Cantina

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

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

Да, кнопки.Вы меня правильно поняли.

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

# Первоначальный дизайн Сначала, после некоторых набросков, нам предоставили базовый дизайн кнопок. Вот приблизительное значение:

Это довольно легко стилизовать в CSS. Важными частями, которые необходимо учитывать на этом этапе, были:

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

Уточнение

Затем дизайнер создал артборд, содержащий все возможные варианты сочетания кнопок:

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

Давайте наметим это:

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

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

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

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

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

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

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

  .button {
  цвет фона: прозрачный;
  граница: 0;
  цвет: #fefbef;
  семейство шрифтов: «Open Sans», без засечек;
  font-weight: 600;
  высота строки: 1;
  margin-top: 1.5рем;
  ширина: 100%; / * Большая, удобная для мобильных устройств сенсорная мишень * /

  / * Медиа-запросы * /
  @media (min-width: 37,5em) {
    ширина: авто; / * Маленькие кнопки на больших экранах * /
    padding-left: 2rem;
    отступ справа: 2 бэр;
    маржа слева: 1бэр;
    край-правый: 1бэр;
  }
}

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

См. Категории пера: Создание улучшенной кнопки в CSS, автор Эрик Бейли (@ericwbailey) на CodePen.

Скройте представление кода, чтобы увидеть обработку планшета / рабочего стола, нажав вкладку с надписью «Scss».

Участок сгущается

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

Это абсолютно верный запрос, значки используются вместе с кнопками все время — это всего лишь четвертая категория, которую мы можем добавить к существующим трем. Маленькая полая третичная кнопка со значком? Для меня это звучит вполне приемлемо.

См. «Иконки пера: создание улучшенной кнопки в CSS», автор Эрик Бейли (@ericwbailey) на CodePen.

Мы используем свойство SVG для отображения значков, объявленных невидимо в верхней части документа, а затем пишем селекторы с ограниченной областью видимости для стилизации любого SVG в пределах . button . Как по волшебству, первая переменная CSS, currentColor , обрабатывает раскрашивание значка соответствующим образом, независимо от того, используется ли это сплошная или полая обработка.

Опять же, стоит отметить, что с этим подходом мы теперь плавно и легко поддерживаем ~ 3 4 возможных комбинаций и потенциально неограниченное количество значков.

Сюжет Rethickens

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

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

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

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

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

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

Замечательно то, что родительский класс является ближайшим применимым объявлением над ним в исходном порядке. С практической точки зрения, у вас может быть страница со светлым фоном, отображающая модальный темный фон, а кнопка в модальном окне будет иметь правильный высококонтрастный цвет фона, и все это без необходимости манипулировать объявлением каких-либо дополнительных классов модификаторов через JavaScript.

См. «Перо с учетом контекста: создание улучшенной кнопки в CSS» Эрика Бейли (@ericwbailey) на CodePen.

Нажмите «Переключить Bkg». в верхнем левом углу примера CodePen для переключения между светлым и темным фоном.

Я должен вас предупредить: этот вид селектора одновременно мощный и хрупкий. Без строгого размещения имен и четко определенных классов компонентов высока вероятность непредвиденных столкновений стилей, если вы воспользуетесь этой техникой для нескольких элементов. Применяйте его со здоровой дозой осторожности и осмотрительности.

Состояние дел

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

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

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

По умолчанию CSS предоставляет три псевдокласса, применимые к кнопкам: : hover , : active и : focus . Также есть HTML-атрибут disabled и ARIA aria-busy = "true" , оба из которых могут применяться к элементам

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *