Как сделать кнопку html5
Большая коллекция кнопки CSS / HTML
Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.
Как сделать кнопку на CSS
Страница с примерами ниже, красивых и современных вариантов кнопок только на CSS и HTML
Если кому интересно читаем тут описание, из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».
Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.
Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
Когда применяется тег button?
Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
Кнопка HTML
Кнопка — самый часто используемый элемент WEB. Её HTML-код очень простой, и сейчас я вам покажу как он пишется и расскажу, что означают его символы и буквы.
В предыдущей статье мы научились создавать рамки.
Тег button — встраиваемый элемент. Его можно вставить в любую строку кода или текста.
Вместе с тем его можно вставить в любой блочный элемент, например теги ( p или div )
Первый пример рассмотрим в HTML документе, а в остальных будет изменяться только содержание тега body
А вот результат, можно пощёлкать. Тег button по умолчанию создаёт интерактивную кнопку.
Следующую кнопку сделаем с применением тегов таблиц.
Код:
К сожалению настройки моей темы не позволяют мне в полной мере использовать оформление таблицы, но об этом очень подробно рассказано и показано в статье Таблицы HTML
А это значит, что кнопке можно будет придать более оригинальное оформление.
Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает.
Давайте подробно рассмотрим, какие свойства мы применили для оформления.
1. background: #fdeaa8; — цвет кнопки;
2. width: 80px; — ширина кнопки;
3. height: 40px; — высота кнопки;
4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;
5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;
6. font-size: 20px; — размер текста;
В тег button можно вставить и картинку.
Кнопка
Его действие заключается в том, что при наведении курсора на кнопку, будет появляться окно подсказки, с текстом, который мы в этот атрибут введём.
Обычно в нём указывается место, в которое ведёт данная кнопка.
Кнопка
Как сделать кнопку ссылкой.
В значении указывается адрес, по которому и будет осуществлён переход. К примеру так:
И полный код кнопки будет выглядеть так:
Теперь можно этой кнопкой перенаправлять посетителя на другую страницу сайта, или на другой сайт.
Если расположить несколько button в строку друг за другом, то получится вот такое меню, которое можно использовать как постраничную навигацию.
Ссылка вместо кнопки
Правда такая кнопка не будет интерактивной по умолчанию, но интерактивность ей можно будет легко придать стилевыми свойствами.
Вот самая простая форма, которую можно придать ссылке
А вот как придать ей интерактивность трансформацию и анимацию, смотрите в статье Кнопки CSS с оригинальными эффектами
Желаю творческих успехов.
Перемена
Настоящий еврей зарабатывает тысячу долларов в месяц, две тысячи отдает жене, а на оставшиеся три живет сам.
24 комментария на «Кнопка HTML»
ОГРОМНОЕ СПАСИБО ЗА ПОЛЕЗНЫЙ МАТЕРИАЛ.
Хоть скажите, а куда вам надо-то её, так сказать, залить? Если сайт, то html или на CMS на какой? Есть там загрузчик изображений или нет? Или страница в сети? Или ещё что.
Расскажите, куда заливать изображение кнопки в png без фона из фотошопа, что бы она работала. какой код. как указать путь. разжуйте для неандертальцев пожалуйста!
Нет не пользуюсь. Я всё это могу написать.
Подскажите, вы вот этим c-wd.ru/tools/cnopka/ инструментом пользуетесь?
Как делаются подобные кнопки показано и рассказано на страницах
https://starper55plys.ru/css/pseudo-class-css/,
https://starper55plys.ru/css/knopki-s-effektami/
https://starper55plys.ru/css/kak-sdelat-ten/
Вам нужно будет только подправить некоторые свойства css (цвета, размеры), чтоб получить желаемый результат.
Или заказать изготовление кнопки на фрилансе, или мне за 500 руб.
Как сделать кнопку сохранить?Например ты написал на сайте Публикацию.Вот,теперь как её сохранить?
Да Миша, по обратной связи у меня почти ничего нет, так как все мои сайты на вордпресс, а у него эта функция есть по умолчанию. Вам посоветую копнуть по запросу Формы комментариев, или Скрипт комментариев. Я сейчас глянул — полно готовых решений. И на форумах и на сайтах. Можно сделать как на вордпресе на каждой странице, можно на отдельной странице, и на неё ссылку из шапки.
Как пишутся сами формы обратной связи у меня есть https://starper55plys.ru/html/formyi-html-teg-input/, остаётся только подобрать скрипт отправки, ну и можно оформление в css добавить.
Здравствуйте, мне очень понравились Ваши мастер-классы на сайте. Со стороны кажется это так просто и легко. Класс. Скачал себе программу «Мини-сайт (Minisite.4.3)» с целью разработки веб-сайта, Вроде, тоже все понятно и прост в работе, но как выяснилось, нет блока «Обратная связь или задать вопрос» для письменного обращения к адресату. т.е. ко мне… Блин, голову сломал искать коды HTML…Помогите найти код.. Заранее спасибо.
Вообще-то ваш вопрос не в теме. Такие вещи делаются на javascript или php.
Вариант на javascript
var copyTextareaBtn = document.querySelector(‘.js-textareacopybtn’);
copyTextareaBtn.addEventListener(‘click’, function(event) <
var copyTextarea = document.querySelector(‘.js-copytextarea’);
copyTextarea.select();
// Поле в котором публикуется код, текст
Сохранить // Текст в кнопке
Как сделать кнопку «Сохранить»?
Иначе говоря, на странице опубликован короткий код (текст), нужно создать кнопку, при нажатии на которую сохранялся бы этот текст в буфере обмена (ClipBoard) удалённого компьютера, или, на худой конец, предлагался бы диалог «Сохранить как…»
В этом посте, тёзка, css нет. Все значения в атрибуте style. Это чистый html. Вставьте приведённый код в том месте статьи, или другого блока где нужна кнопка, и она там появится. Только в статью код надо вставлять в режиме Текст. В визуальном не получится. Правда возможно придётся подкорректировать и внешний вид кнопки и её положение на странице, а может и нет.
Но если корректировать, то тут уж надо будет поучить и html и css. Никто запростотак не будет ковыряться в вашем шаблоне, выискивая что там задано кнопкам, и задавать отступы, чтоб разместить её точно там где надо.
Из самого первого кода надо взять только тег p и всё что в нём. Остальное это каркас страницы.
Чтоб кнопка работала, про это есть в статье.
Да все прекрасно спасибо. Да вот только как сделать что бы эта кнопочка появилась у меня на странице. У меня есть html и css куда что вставлять что бы у меня на странице эта кнопочка появилась. Я на пример не знаю. Все описывают как написать на css а как вставить что бы работала не пишут. Помогите пожалуйста если хотите конечно. Заранее спасибо. Плиз
Чтоб поместить текст в кнопку нужно поместить его в код кнопки перед закрывающим тегом. Чтобы иметь возможность придать кнопке вид заголовка или строки, для создания кнопки надо использовать тег а, а не button
Здравствуйте скажите пожалуйста а как верхнюю строку сделать кнопкой? Что бы блок с кнопки открывался?
Спасибо за ответ, но у меня так не работает. Я нашел сегодня сам как можно сделать, вместо onclick=»window.location=’ пишется onclick=»window.open(‘. Еще раз спасибо.
Здравствуйте. Скажите пожалуйста, как сделать кнопку работающую через «onclick», чтобы открывала страницу в новой вкладке, если это возможно.
К сожалению такого нет, но есть статья про шордкоды.
Если то, что вы хотите вставить в виджет, заключить в шорткод, в файле function.php, и спозиционировать, а потом вставить маячок шорткода в файл footer, или sidebar.php, то этот элемент будет выводится там, где Вам нужно. Правда придётся повозится с позиционированием.
А нет ли у вас на сайте статьи по поводу добавления дополнительной области для виджетов или переместить уже существующею?
Нормально. Только я бы сделал их такими же как в левой колонке, или поближе к ним. Ну там цвет, градиент и шрифт. А то они как-то уж больно из общей картины выделяются.
И вот тут кнопочки уже покруче.
Большое спасибо! Добавил Ваши кнопочки себе на сайт.
Очень рад, что у вас получилось, но вот тег или спецсимволы опять не применили. Посмотрите что получается. Я потом исправлю.
Нашел ответ на одном из форумов. Цитирую:
«потому что не надо делать шорткодом кнопку. можно точно так же разукрасить при помощи css
а дальше правь стили и выноси их в style.css»
Что же, пока сделал кнопку таким образом. На данном этапе меня устраивает, потом буду улучшать с помощью CSS.
Кнопки | CSS
Простая HTML кнопка для сайта
Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.
Как сделать кнопку на CSS
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»
Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.
Код кнопки для сайта
Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.
Кнопка с градиентом
Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].
А вот всякие перемещения работают на ура.
Довольно популярно разделение кнопки на два цвета
Красивые кнопки CSS
Кнопки «Скачать» CSS
Стилизация кнопок с помощью CSS
Анимированная кнопка: «свечение текста»
Стиль кнопок с бликами
Кнопки меню
Объёмная кнопка CSS
Вдавленная кнопка
Выпуклая кнопка HTML
Круглые CSS кнопки
Анимированная кнопка CSS
Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].
3d кнопка CSS
Оформление кнопок
Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.
Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.
Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.
98 комментариев:
damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html
В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>
a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;
a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.
в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка
Тоже но без иконки:
Кнопка
В CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
Делаем стильные кнопки
Рис. 1. Исходная и измененная кнопка
Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.
За основу возьму оригинальную кнопку в браузере, которая содержит линейный вертикальный градиент и скругленные края.
Вид кнопок в разных браузерах показан на рис. 2.
Рис. 2. Кнопки со скругленными уголками
В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.
Теперь самое интересное, делаем вертикальный линейный градиент. Для этого опять в ход пойдут индивидуальные стили для каждого браузера.
Firefox
В градиенте указывается исходная точка, угол градиента, начальный и конечный цвет. В нашем случае, когда градиент идет вертикально сверху вниз, достаточно задать только цвета, остальные параметры используются по умолчанию.
Chrome, Safari
Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00BBD6′, endColorstr=’#EBFFFF’);
Опера отдыхает, в ней градиенты еще не реализованы.
Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).
Пример 1. Кнопки с линейным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.
Рис. 3. Вид кнопки с градиентом
Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.
Firefox
Вместо двух значений вставляем желаемое количество цветов, градиент будет плавно переходить от одного цвета к другому.
Chrome, Safari
Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.
Пример 2. Кнопки с улучшенным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Результат примера показан на рис. 4.
Рис. 4. Градиент, какой надо градиент
Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно, для чего в практикум добавил соответствующую задачу.
Рис. 5. Такие разные кнопки
Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).
Рис. 6. Наложение фона на уголки в IE 9
Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.