Как сделать кнопку в css: Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Содержание

Как сделать alert кнопку в CSS

Вы здесь: Главная — CSS — CSS3 — Как сделать alert кнопку в CSS

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

HTML-код

Почему к тегу button, мы применили два класса? Для того, чтобы не прописывать много раз повторяющийся код. У всех 5-ти кнопок есть одинаковые стили, их мы и вынесли в отдельный класс btn. Остальные пять классов отличаются друг от друга только цветом. Именно такой способ написания кода является оптимальным.

<button>Успешно</button>
<button>Информация</button>
<button>Предупреждение</button>
<button>Опасно</button>
<button>По умолчанию</button>

CSS-код

Это общие стили для всех кнопок.

.btn {
  border: none; /* Убирает рамки */
  color: #fff; /* Цвет текста на кнопке */
  padding: 12px 26px; /* Добавляет некоторые отступы */
  cursor: pointer; /* Добавляет курсор указатель при наведении */
}

Для каждой кнопки свой цвет в состоянии покоя и при наведении мыши на неё.


Пример блока цветных alert кнопок



Альтернативные CSS стили для alert кнопок

Существует масса вариантов, как по другому стилизовать alert кнопки

. Мы рассмотрим самые простые и распространенные на веб-сайтах. HTML-код для всех стилей остается такой же. Меняются только стили CSS.

Контурные alert кнопки

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

.btn {
  border: 2px solid black; /* Толщина, стиль и цвет рамки */
  background-color: #fff; /* Цвет фона */
  color: #000;
  padding: 12px 26px;
  cursor: pointer;
}

Каждая кнопка имеет свой цвет рамки и шрифта, которые меняются при наведении мыши.


Пример блока alert кнопок с цветными рамками


Хотите alert кнопки с закругленными углами? Добавьте всего одну строчку к классу btn.

.btn {
  border-radius: 5px;
}

Посмотрите, как визуально изменились кнопки.


Прозрачные alert кнопки

Если у фона кнопки убрать белый цвет, то кнопки станут прозрачные. Классу btn не задаете вообще никакой цвет.

  • Создано 22.10.2018 10:30:00
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

простые примеры кода для новичков

Приветствую всех читающих эту публикацию, а также моих горячо любимых подписчиков! Сегодня я хочу рассказать вам об одном модном и симпатичном объекте, который можно встретить на страницах интернет-магазинов знаменитых брендов. А теперь внимание! Я покажу, как создается прозрачная кнопка css свойствами.

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

А вот и прародитель дизайна!

Не удивительно, что в мире веб-программирования трудно запечатлеть в истории всех создателей каких-то элементов дизайна. Однако с данной кнопкой все иначе. Первый онлайн-ресурс, который использовал «призрачную кнопку» стал Tumblr. После дебюта на таком знаменитом сайте дизайн начал взлетать по ступенькам популярности.

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

Особенности «кнопки призрака»

Из-за своего внешнего вида полупрозрачный button стали называть «кнопкой призраком». И действительно, особенностями такого объекта являются:

  • Тонкая контурная линия;
  • Преобладание черно-белой палитры цветов;
  • Прозрачный фон;
  • Масштаб больше стандартного.

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

Плюсы Минусы
·       Использование минимального количества css-свойств, украшений и отвлекающих анимаций;

·       Простота и лаконичность;

·       Отлично привлекает внимание пользователей при правильном использовании;

·       Не отвлекает от важного контента.
·       При неумелом использовании может стать незаметной на ярком фоне; ·       В некоторых случаях пользователь может быть дезориентирован.

Пример прозрачной кнопки

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

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

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset=utf-8" />
  <title>Пример сайта с призрачной кнопкой</title>
  <style type="text/css">
  BODY {
  background: url(https://modoza.ru/mail_images/menu/rasprodazha-menu.png) no-repeat;
  background-size:100%
  }
a.b-ghost {
  display: block;
  margin-top:45px;
  width: 350px;
  padding: 15px;
  color: 	#1C1C1C;
  font-weight: bold;
  font-family: Arial Unicode MS, sans-serif;
  border: 3px solid 	#363636;
  text-align: center;
  outline:  1px solid #828282;
  text-decoration: none;
  transition: background-color 0.8s ease-in-out,
              color 0.8s ease-in-out;
}
.b-ghost:hover,.b-ghost:active {
  background-color: #363636;
 border: 3px solid 	#CFCFCF;
  color: #CFCFCF;
  transition: background-color 0.6s ease-in-out,
              color 0.6s ease-in-out;
}
  </style>
  </head>
  <body>
  <div >
<a href="#">Мужская одежда</a>
   <a href="#">Женская одежда</a> 
  </div>
  </body>
</html>

<!DOCTYPE html> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta charset=utf-8″ /> <title>Пример сайта с призрачной кнопкой</title> <style type=»text/css»> BODY { background: url(https://modoza.ru/mail_images/menu/rasprodazha-menu.png) no-repeat; background-size:100% } a.b-ghost { display: block; margin-top:45px; width: 350px; padding: 15px; color: #1C1C1C; font-weight: bold; font-family: Arial Unicode MS, sans-serif; border: 3px solid #363636; text-align: center; outline: 1px solid #828282; text-decoration: none; transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out; } .b-ghost:hover,.b-ghost:active { background-color: #363636; border: 3px solid #CFCFCF; color: #CFCFCF; transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out; } </style> </head> <body> <div > <a href=»#»>Мужская одежда</a> <a href=»#»>Женская одежда</a> </div> </body> </html>

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

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1311 раз

Как выровнять кнопку по центру используя CSS и HTML

Чтобы расположить кнопку в центре HTML страницы, можно использовать 3 разных подхода:

Разберем их подробнее.

Как использовать

margin: auto для центрирования кнопки

Первый и, возможно, самый простой вариант — добавить кнопке CSS свойство margin: 0 auto, а затем добавить display: block, чтобы сделать кнопку в центре.

button {
  margin: 0 auto;
  display: block;
}

margin: 0 auto — это краткая форма установки верхнего и нижнего полей в 0 и левого и правого полей на авто.

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

Как центрировать кнопку с помощью HTML тега

div

Второй вариант — обернуть кнопку тегом div, а затем использовать text-align: center для центрирования кнопки внутри этого <div>.

Как будто ты размещаешь текст по центру.

div {
  text-align: center;
}
<div> <button>Centered button</button> </div>

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

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

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

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

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

flexbox

Третий вариант — использовать flexbox для центрирования кнопки.

Этот подход идеален, если ты уже используешь

flexbox на веб-странице, а кнопка находится внутри родительского элемента.

Чтобы центрировать кнопку с помощью flexbox, ты должен сделать 2 вещи:

  • сначала добавь display: flex к родительскому элементу кнопки, чтобы активировать функции flexbox
  • затем добавь justify-content: center, чтобы кнопка была по центру

В приведенном ниже примере div является родительским элементом кнопки.

div {
  display: flex;
  justify-content: center;
}
<div>
   <button>Centered button</button>
</div>

Теперь ты знаешь 3 способа центрирования кнопки в CSS!

Получи мою бесплатную электронную книгу для подготовки к техническому собеседованию на JavaScript или начни Учить Full-Stack JavaScript прямо сейчас!

Как сделать простую анимацию кнопок css

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

Уже ни для кого не секрет, что на динамичном и интерактивном сайте пользователь проведет больше времени, а это немаловажный показатель сайта. Давайте рассмотрим интерактивные кнопки, которые взаимодействуют при наведении на них курсора мыши. За наведение курсора на объект отвечает псевдокласс :hover. В первом примере использованы псевдоэлементы :before и :after (:before — полоска сверху, а :after — снизу), изначально имеющие нулевую ширину width: 0. И при наведении курсора мыши на кнопку обоим псевдоэлементами присваивается ширина width: 100%. Для плавного изменения ширины полосок необходимо добавить свойство transition: all 0.25s ease-in-out.

 

See the Pen Анимация кнопки при наведении css by webgrind (@webgrind) on CodePen.

 

Ниже кнопка, теряющая объемность при наведении. Т.е. получается эффект нажатия. Также можно заменить псевдокласс :hover на :active и тогда анимация будет происходить при нажатии на кнопку.

 

See the Pen Анима by webgrind (@webgrind) on CodePen.

 

Простая, но красивая кнопка с плавным заполнением фона с прозрачного на цветной.

 

See the Pen EoovmW by webgrind (@webgrind) on CodePen.

 

Кнопка как и в первом варианте, только с вертикально анимацией.

 

See the Pen jYYawv by webgrind (@webgrind) on CodePen.

Создание кнопок со значками, но без изображений с использованием CSS

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

 

 


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

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

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

Создание кнопки 

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

Скопируйте код CSS для кнопки, расположенный ниже:

.buttons
{
  display: inline-block;
  background: #eeeeee; /* Old browsers */
  background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
  border: 1px solid #a1a1a1;
  padding: 0 2em;
  margin: 0.5em;
  font: bold 1em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  border-radius: .2em;
} 

Добавление псевдокласса :before 

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

Все, что нам нужно сейчас, — добавить внешние и внутренние отступы, чтобы расположить псевдокласс :before правильно.

Скопируйте код CSS ниже для псевдокласса  :before:

.buttons:before
{
  float: left;
  width: 1em;
  text-align: center;
  font-size: 1.7em;
  margin: 0 0.5em 0 -1em;
  padding: 0 .2em;
  pointer-events: none;
} 

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

Задав свойство содержимого псевдоклассу :before, мы можем создать новые классы CSS для разных символов, которые мы хотим использовать.

Ниже находятся разные значки, которые показались нам интересными для кнопок на чистом CSS.

Кнопки с формами

Кнопка, Добавить, Редактировать, Удалить, Сохранить, Письмо, Крест.

Вот кнопки, которые можно использовать для форм:

/*Forms*/
.add:before    { content: "\271A"; }
.edit:before   { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before   { content: "\2714";}
.email:before  { content: "\2709";}
.cross:before  { content: "\2716"; } 

Кнопки с валютами

Доллар, Евро, Цент, Фунт. 

Если нужно отобразить символы валют на кнопках:

/*Currency*/
.dollar:before { content:"\0024"; }
.euro:before   { content:"\20AC"; }
.pound:before  { content: "\00A3"; }
.cent:before   { content: "\20B5"; } 

Кнопки с температурой

Цельсий, Фаренгейт

Для отображения символов для температуры по Цельсию и Фаренгейту:

/*Temp*/
.celsius:before    { content: "\2103"; }
.fahrenheit:before { content: "\2109"; } 

Кнопки с математическими символами

Число пи, одна треть, две трети, одна пятая, две пятых, три пятых, четыре пятых, одна шестая, пять шестых, одна восьмая, три восьмых, пять восьмых, семь восьмых, четверть, половина, три четверти.

Есть много математических символов, это те, которые показались нам полезными:

/*Math & Factions*/
.pi:before            { content: "\213C"; }
.one_thrid:before     { content: "\2153"; }
.two_thrid:before     { content: "\2154"; }
.one_fifth:before     { content: "\2155"; }
.two_fifth:before     { content: "\2156"; }
.three_fifth:before   { content: "\2157"; }
.four_fifth:before    { content: "\2158"; }
.one_sixth:before     { content: "\2159"; }
.five_sixth:before    { content: "\215A"; }
.one_eighth:before    { content: "\215B"; }
.three_eighth:before  { content: "\215C"; }
.five_eighth:before   { content: "\215D"; }
.seven_eighth:before  { content: "\215E"; }
.quarter:before       { content: "\00BC"; }
.half:before          { content: "\00BD"; }
.three_quarter:before { content: "\00BE"; } 

Кнопки со стрелочками

Стрелочка влево, Стрелочка вверх, Стрелочка вправо, Стрелочка вниз, Стрелочка влево вверх, Стрелочка вправо вверх, Стрелочка влево вниз, Стрелочка вправо вниз, Далее.

Можно использовать разные типы стрелочек:

/*Arrows*/
.next:before             { content: "\279C"; }
.left_arrow:before       { content: "\2190"; }
.up_arrow:before         { content: "\2191"; }
.right_arrow:before      { content: "\2192"; }
.down_arrow:before       { content: "\2193"; }
.up_left_arrow:before    { content: "\2196"; }
.up_right_arrow:before   { content: "\2197"; }
.down_left_arrow:before  { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }

Кнопки с различными символами

Нравится, Звезда, Искра, Воспроизвести, Снег, Черное солнце, Облако, Зонт, Снеговик, Черная звезда, Белая Звезда, Черный телефон, Косой крест, Горячий напиток, Череп, Радиоактивность, Биологическая опасность, Мир, Инь и Ян, Хмурое лицо, Улыбающееся лицо, Первая четверть луны, Последняя четверть луны, Инвалидная коляска, Переработка,  Переработка на черном фоне, Нота, Предупреждение, Мужской и женский символы, Ножницы.

Значков очень много, нам показались интересными следующие:

/*Symbols*/
.like:before               { content: "\2764"; }
.star:before               { content: "\2605"; }
.spark:before              { content: "\2737"; }
.play:before               { content: "\25B6"; }
.watch:before              { content: "\231A"; }
.blacksun:before           { content: "\2600"; }
.cloud:before              { content: "\2601"; }
.umbrella:before           { content: "\2602"; }
.snowman:before            { content: "\2603"; }
.blackstar:before          { content: "\2605"; }
.whitestar:before          { content: "\2606"; }
.blackphone:before         { content: "\260E"; }
.whitephone:before         { content: "\260F"; }
.saltire:before            { content: "\2613"; }
.hot_drink:before          { content: "\2615"; }
.skull:before              { content: "\2620"; }
.radioactive:before        { content: "\2622"; }
.biohazard:before          { content: "\2623"; }
.peace:before              { content: "\262E"; }
.yingyang:before           { content: "\262F"; }
.frowning_face:before      { content: "\2639"; }
.smiling_face:before       { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before  { content: "\263E"; }
.wheelchair:before         { content: "\267F"; }
.recycle:before            { content: "\267D"; }
.recycle2:before           { content: "\267C"; }
.music_note:before         { content: "\266C"; }
.warning:before            { content: "\26A0"; }
.male_and_female:before    { content: "\26A4"; }
.scissors:before           { content: "\2701"; }
.airplane:before           { content: "\2708"; }
.snow:before               { content: "\2042"; }

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

Автор урока Paul Underwood

Смотрите также:

Как стилизовать блочные кнопки (во всю ширину) с помощью CSS?

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

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

Создание полноразмерной кнопки

Создать полноразмерную кнопку очень просто и легко, просто возьмите элемент

Кнопка во всю ширину

Выход

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

Пример: создание полноразмерной кнопки с помощью CSS

Как мы знаем, мы также можем создать кнопку с элементом с type=»submit». Те же свойства CSS можно использовать и с ним для создания полноразмерной кнопки. Вот пример, чтобы показать это.

Заключение

В этом уроке мы научились создавать кнопку полной ширины блока с помощью CSS. Для этого используйте display: block и width: 100% .Это свойство можно использовать с элементом