Большая коллекция кнопки CSS / HTML
Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.
Примеры 30 кнопок CSS3, только чистый код (без JS и картинок) , смотрим ниже!
Представляем на dle9.com замечательную коллекцию кнопок на 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?
- тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
- если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.
Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
Тянущаяся кнопка
При создании серьезных проектов многие программисты заморачиваются с проблемой оформления кнопок. Так как форм на большом ресурсе может быть много, то стоит сразу создать универсальный макет кнопки. В таком случае кнопки будут отличаться друг от друга лишь шириной, которая зависит от объема текста в ней.
Вот так выглядит схема создания нашего макета
Итак, с внешним видом определились! Теперь стоит определиться с требованиями для нашей кнопки, которые помогут создать оптимальный и валидный код:
- кнопка должна обладать «резиновыми» свойствами (растягиваться в зависимости от ширины текста);
- кнопка должна быть создана из тега input;
- кликабильность должна сохранятся по всему периметру кнопки (не только на тексте);
- для создания кнопки за основу берется HTML-код, без использования javascript;
- соблюдение всех стандартов;
- высокий показатель кроссбраузерности.
На первый взгляд кажутся бессмысленными эти мороки, но в итоге это может сохранить вам уйму времени. В первую очередь такое решение приносит гибкость в корректировании кода. Если каждая кнопка будет создана на одном коде, то для внесения коррективов в ее оформление потребуется работать с каждой из них индивидуально. Также каждая кнопка может называться по своему, поэтому мы ее создаем с тянущимися свойствами, в зависимости от длины текста названия. В тоже время использование единого макета кнопки будет экономить трафик для нашего ресурса.
Когда мы убедились в полезности принятого нами решения, следует рассказать, как это реализуется.
Просто длинный фон
Первое решение достаточно примитивное, но завоевывает внимание своим оригинальным подходом. Для начала следует создать в фотошопе 2 картинки, которые создадут фон кнопки и ее форму. Вам понадобится создать такие картинки
После чего создаем кнопку из тега input и устанавливаем фоном нашу картинку. В силу того, что картинка достаточно длинная, она займет нужное место в кнопке, а лишнее отсекается границами контейнера. Но чтобы левая часть выглядела также красиво, как и права, необходимо добавить вспомогательный блок, в который и войдет правая часть нашей кнопки. Кодовая часть нашего метода примет следующий вид:
Убедимся, что метод работает
При использовании такого метода стоит помнить о том, что:
- лечение для IE должно быть подключено через условные комментарии;
- лучше использовать не 2 разные картинки, а одну объединенную — спрайт.
Метод можно назвать почти универсальным. Его нельзя будет использовать только в том случае, если уголки кнопки не будут иметь своего фона и будут прозрачными.
Модифицируем первое решение
Как указывалось выше, первый способ не может быть реализован с прозрачными углами. Подумав над этой проблемой я нашел решение, которое позволяет устранить эту проблему. Для этого нужно внести некоторые коррективы в наш код:
Если сделать все правильно, то результат получится такой же, как и в предыдущем методе.
В чем выигрывает этот метод?
- можно использовать прозрачные уголки кнопки;
- семантика кода более выгодна, так как текст кнопки относится к ее содержимому.
Однако в тоже время имеют место некоторые недостатки:
- очень объемный код для одной кнопки.
Решение на CSS3
С выходом новой спецификации создание кнопки значительно упростилось. Теперь не требуется такой огромный код, а скругленные уголки легко реализуются с помощью свойства border-radius. Потребуется только немного подлечить старичка IE
Преимущества использования этого метода на лицо! Код значительно меньше и проще, а главное полностью валиден. Результат в браузере будет точно такой же, как и в предыдущих способах.
Делаем кнопку “Наверх” для сайта
В этом посте мы с вами сделаем кнопку “Наверх”, ее суть – это появится при прокрутке сайта вниз и при нажатии на ее, отправить пользователя на верх текущей страницы. Думаю объяснять много не стоит мы все встречали подобные кнопки “наверх” на многих сайтах.
План по созданию кнопки “Наверх”
1. Создадим html структуру для данной кнопки.
2. Стилизуем ее. Сделаем ее невидной и разместим правее относительно края страницы сайта.
3. Напишем скрипт, который будет отображать кнопку после прокрутки и обрабатывать нажатие пользователем на саму кнопку “Наверх”
Итак с планом действий по созданию кнопки наверх все понятно, приступим к его реализации ��
1. Создадим html структуру для кнопки “Наверх”
Структура для кнопки “Наверх”, максимально проста. Состоит она из одного блока с /> внутрь этого блока я поставил иконку указателя вверх, можно вместо этого написать слово “Наверх” или разместить спецсимвол html, на ваше усмотрение.
Что касается используемой мною иконки, то об этом у меня есть статья “Удобные иконки для сайта в шрифте Font Awesome”
Создание Bootstrap кнопок. Настройка цвета и размера
Кнопки — это один из самых распространённых элементов в дизайне сайтов и приложений. В большинстве случаев кнопки применяются для того, чтобы привлечь внимание посетителя сайта к действиям, которые они выполняют. Кнопки используются в HTML формах, диалоговых окнах, меню и во многих других местах веб-страниц.
Для оформления элемента в виде кнопки обычно используется <button> , а также ссылки <a href .
Хорошей практикой является использование ссылок <a href для создания переходов между страницами, а <button> — для выполнения различных действий на странице.
Создание дефолтной Bootstrap кнопки осуществляется посредством добавления к тегу базового класса btn и класса с темой (например, btn-primary ).
В Bootstrap 3 нет темы secondary, light и dark, но есть default.
Outline кнопки (только Bootstrap ?пеж4)
Создание бутстрап кнопки с контуром (без фона) необходимо добавить к элементы классы btn и btn-outline-* :
Изменение размера кнопки
Для увеличения или уменьшения размера кнопки, к ней нужно дополнительно добавить класс btn-{size} . Вместо {size} необходимо указать lg , sm или xs (только в Bootstrap 3).
Класс btn-lg предназначен для создания большой кнопки, sm — маленькой и xs — очень маленькой.
Кнопка, занимающая всю ширину родительского элемента
Создание кнопки с шириной равной ширине родительского элемента осуществляется с помощью класса btn-block.
Активное состояние кнопки
Если необходимо отображать кнопку нажатой (с более тёмным фоном и рамкой), то к ней необходимо добавить класс active .
Для поддержки вспомогательных технологий к кнопке нужно добавить атрибут aria-pressed=»true» .
Неактивное состояние кнопки
Если необходимо отключить возможность нажатия на кнопку, то её необходимо перевести в неактивное состояние.
Для элемента button это действие осуществляется посредством добавления к нему атрибута disabled .
Для отключения функциональности кнопки, созданной с помощью элемента a , необходимо выполнить немного другое действие, а именно добавить к ней класс disabled .
Класс disabled отключает возможность клика по кнопке посредством установки ей (элементу a ) CSS-свойства pointer-events со значением none .
Для обеспечения поддержки вспомогательных технологий, таких как программ чтения с экрана, к кнопке (элементу a ) необходимо добавить атрибут aria-disabled = «true» .
Плагин Buttons
Компонент «Buttons» включает в себя не только CSS, но JavaScript. Данный код (buttons.js) добавляет на страницу функционал, предназначенный для управления состоянием кнопок, как отдельных, так и находящихся в группах.
Использование кнопки в качестве переключателя
Для создания кнопки-переключателя добавьте к ней атрибут data-toggle=»button» . После этого при нажатии на кнопку она будет переключаться из обычного состояния в активное и наоборот.
Если кнопка изначально должна находиться в активном состоянии, то к ней необходимо добавить класс active и aria-pressed=»true» .
Checkbox и radio кнопки
CSS-стили Buttons можно применить и к другим HTML элементам, таким как к label , чтобы создать checkbox или radio кнопки.
Атрибут data-toggle=»buttons» предназначен для JavaScript. Он используется в его коде в качестве селектора для выбора элементов, к которым необходимо добавить поведение «переключения».
Состояние кнопок обновляется через событие click . Если необходимо использовать какой-то другой способ для обновления состояния checkbox или radio кнопок , то его нужно написать самостоятельно.
Класс btn-group-toggle (Bootstrap 4) предназначен для стилизации элементов input внутри группы.
Методы плагина Buttons
В Bootstrap 3 и 4 версии имеется метод $().button(‘toggle’) . Он предназначен для программного переключения состояния одной или нескольких кнопок.
Например , создадим 2 кнопки, и с помощью одной кнопки будем переключать состояние другой:
В Bootstrap 3 кроме вышеприведённого метода имеются ещё 2:
- $().button(‘string’) — изменяет текст кнопки на значение, хранящееся в атрибуте data-string-text (имя атрибута составляется путём сложения строки data- , строкового значения , переданного в функцию button, например string и строки -text );
- $().button(‘reset’) — заменяет текст на изначальный.
Пример работы с методами $().button(‘complete’) и $().button(‘reset’) .
Этот пример состоит из 2 кнопок.
При нажатии на первую кнопку её текст изменяется на значение атрибута data-complete-text . Это действие выполняется с помощью метода $().button(‘complete’) .
При нажатии на вторую кнопку текст первой кнопки заменяется на изначальный. Осуществляется это посредством метода $().button(‘reset’) .
Выравнивание кнопки по центру
Кнопка в Bootstrap 3 и 4 по умолчанию отображается как inline-block . Это обстоятельство и определяет способы, с помощью которых её можно выровнять по центру.
Первый способ — это обернуть кнопку элементом , который показывается в документе как блочный (т.е. у которого CSS-свойство display , равно значению block ), и добавить к нему класс text-center .
Второй способ — это изменить отображение кнопки на блочное и добавить к ней стили margin-left: auto и margin-right: auto . В Boostrap 3 — это действие можно выполнить с помощью класса center-block , а в Bootstrap 4 — посредством классов d-block и mx-auto .
Выравнивание кнопки по левому или правому краю
Способы выравнивания кнопки по левому или правому краю в Bootstrap 3 и 4 показаны в нижеприведенных примерах.
Как создать круглую кнопку
Для создания круглой кнопки необходимо установить с помощью CSS ей одинаковую ширину и высоту. Радиус скругления в этом случае нужно задать, равный половине ширины или высоты.
Если необходимо содержимое кнопки расположить на нескольких строчках (например, иконку на одной, а текст на другой), то значение CSS свойства white-space необходимо сбросить или другими словами восстановить ему значение по умолчанию.