Стилизация старого доброго элемента button

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Images

How button input type creates a form button in javascript

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison SliderFavicon

Время плавного перехода

Как выровнять элемент по вертикали внутри блочного элемента

Свойство transition-duration добавляет временные рамки CSS изменениям. Стили кнопки без плавного перехода моментально меняются на стили псевдокласса :hover, что может отпугнуть пользователя. В следующем примере стиль кнопки плавно меняется (за 0.5 с): на :hover:

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

А смотрится это так:

Код для плавных переходов сложный и старые браузеры по-разному выполняют анимацию. Поэтому нужно добавить префиксы для старых браузеров:

transition-duration: 0.5s /* Обычная запись, работает во всех современных браузерах*/
-webkit-transition-duration: 0.5s; /* Помогает некоторым версиям safari, chrome и android  */
-moz-transition-duration: 0.5s; /* для firefox */

Images

Как выровнять блок по центру — полное руководство по центрированию div-элемента

Button Bars

Buttons can be grouped together in a horizontal bar using the w3-bar class:

Button
Button
Button

Example

<div class=»w3-bar»>
<button class=»w3-button w3-black»>Button</button>
<button class=»w3-button w3-teal»>Button</button>
<button class=»w3-button w3-red»>Button</button>
</div>

The w3-bar class was introduced in W3.CSS version 2.93 / 2.94.

Buttons can be grouped together without a space between them by using w3-bar-item class:

Button
Button
Button

Example

<div class=»w3-bar»>
<button class=»w3-bar-item w3-button w3-black»>Button</button>
<button class=»w3-bar-item w3-button w3-teal»>Button</button>
<button class=»w3-bar-item w3-button w3-red»>Button</button>
</div>

Buttons bars can be centered using the w3-center class:

Button
Button
Button

Example

<div class=»w3-center»><div class=»w3-bar»>
<button class=»w3-button w3-black»>Button</button>
<button class=»w3-button w3-teal»>Button</button>
<button class=»w3-button w3-disabled»>Button</button>
</div></div>

To show two (or more) button bars on the same line, add the w3-show-inline-block class:

Button
Button
Button

Example

<div class=»w3-show-inline-block»><div class=»w3-bar»>
<button class=»w3-btn»>Button</button> <button
class=»w3-btn w3-teal»>Button</button> <button class=»w3-btn
w3-disabled»>Button</button></div></div><div
class=»w3-show-inline-block»><div
class=»w3-bar»>
<button class=»w3-btn»>Button</button> <button
class=»w3-btn w3-teal»>Button</button> <button class=»w3-btn
w3-disabled»>Button</button></div></div>

Images

Button Shapes

Normal
Round
Rounder
and Rounder
and Rounder

The w3-round-size classes are used to add rounded
borders to buttons:

Example

<button class=»w3-button w3-round»>Round</button>
<button class=»w3-button w3-round-large»>Rounder</button>
<button class=»w3-button w3-round-xlarge»>and Rounder</button>
<button class=»w3-button w3-round-xxlarge»>and Rounder</button>
<button class=»w3-btn w3-round»>Round</button>
<button class=»w3-btn w3-round-large»>Rounder</button>
<button class=»w3-btn w3-round-xlarge»>and Rounder</button>
<button class=»w3-btn w3-round-xxlarge»>and Rounder</button>

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

How To Style Round Buttons

Step 1) Add HTML:

Example

Step 2) Add CSS:

Add rounded corners to a button with the property:

Example

.button { background-color: #04AA6D; border: none; color: white;

padding: 20px; text-align: center;
text-decoration: none; display: inline-block; font-size: 16px;
margin: 4px 2px;}.button1 {border-radius: 2px;}.button2
{border-radius: 4px;}.button3 {border-radius: 8px;}.button4
{border-radius: 12px;}.button5 {border-radius: 50%;}

Go to our CSS Buttons Tutorial to learn
more about how to style buttons.

❮ Previous
Next ❯

Images

Основы CSS кнопок

Существует несколько «нетехнических» стандартов кнопок:

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

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

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

Единица rem: смесь px и em

Итак, мы рассмотрели:

– абсолютные, чёткие, понятные, не зависящие ни от чего.
– относительно размера шрифта.
– относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

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

Следующие кандидаты – и .

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

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

Попробуем использовать этот подход для .

Протестируем на таком списке:

Пока это обычный вложенный список.

Теперь уменьшим размер шрифта до , вот что получится:

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

Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей , которая, можно сказать, специально придумана для таких случаев!

Единица задаёт размер относительно размера шрифта элемента .

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

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

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

Единица не поддерживается в IE8-.

Images

How To Add Button over Image

Step 1) Add HTML:

Example

<div class=»container»> <img src=»img_snow.jpg» alt=»Snow»>
<button class=»btn»>Button</button></div>

Step 2) Add CSS:

Example

/* Container needed to position the button. Adjust the width as needed */
.container { position: relative; width:
50%;}/* Make the
image responsive */.container img { width: 100%;
height: auto;}/* Style the button and place it in the middle of
the container/image */.container .btn { position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); background-color: #555;
color: white; font-size: 16px; padding: 12px 24px;
border: none; cursor: pointer; border-radius: 5px;}
.container .btn:hover { background-color: black;}

❮ Previous
Next ❯

Menus

Disabled Buttons

Buttons stand out with a shadow effect and the cursor turns into a hand when mousing over them.

Disabled buttons are opaque (semi-transparent) and display a «no parking sign»:

Button
Disabled

The w3-disabled class is used to create a disabled button
(if the element support the standard HTML disabled attribute, you can use the
disabled attribute instead):

Example

<a class=»w3-button w3-disabled» href=»https://www.w3schools.com»>Link Button</a>
<button class=»w3-button» disabled>Button</button>
<input type=»button» class=»w3-button» value=»Button» disabled>
<a class=»w3-btn w3-disabled» href=»https://www.w3schools.com»>Link Button</a>
<button class=»w3-btn» disabled>Button</button>
<input type=»button» class=»w3-btn» value=»Button» disabled>

Text Buttons with Individual Backgrounds

Text buttons with a specific background color on hover:

Example

.btn {    border: none;
background-color: inherit;    padding: 14px 28px;
font-size: 16px;    cursor: pointer;
display: inline-block;}/*
Green */.success {    color: green;}.success:hover {
background-color: #04AA6D;    color: white;}/* Blue */.info {
color: dodgerblue;}.info:hover {    background:
#2196F3;    color: white;}/* Orange */.warning {    color:
orange;}.warning:hover
{    background: #ff9800;    color:
white;}/* Red */.danger {    color: red;}.danger:hover {
background: #f44336;    color: white;}/* Gray */.default
{    color: black;}.default:hover {    background:
#e7e7e7;}

Go to our CSS Buttons Tutorial to learn
more about how to style buttons.

❮ Previous
Next ❯

Как сделать кнопку в HTML?

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

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

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

Основными атрибутами таких кнопок являются:

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

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

Кроме того, у тега могут быть следующие атрибуты:

— Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
— Кнопка заблокирована и нажатие на нее не выполняет никаких действий
(только для типа submit) — адрес обработчика формы, на который отправляются данные из формы
(только для типа submit) — Тип отправляемых данных. Может быть , ,
(только для типа submit) — HTTP-метод, при помощи которого пересылаются данные. Может быть или
(только для типа submit) — Отключает автоматическую валидацию введенных данных
(только для типа submit) — Указывает на то, как выводится результат обработки формы. Может быть , , , или значение атрибута фрейма
— Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
— Значение кнопки (смысл примерно тот же, что и с name)

Images

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action элемента <form>. Эта программа, называемая еще обработчиком формы, получает данные введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button>.

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
</head>
<body>
<form>
<p><input name=»login»></p>
<p><input type=»submit»></p>
</form>
</body>
</html>

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер самостоятельно добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:

padding-top: 15px;

padding-right: 15px;

padding-bottom: 19px;

padding-left:15px;

Но так обычно не пишут, потому что много текста.

Menus

How To Create a Button Group

Step 1) Add HTML:

<div class=»btn-group»> <button>Apple</button>
<button>Samsung</button> <button>Sony</button></div>

Step 2) Add CSS:

.btn-group button { background-color: #04AA6D; /* Green
background */ border: 1px solid green; /* Green border
*/ color: white; /* White text */ padding: 10px
24px; /* Some padding */ cursor: pointer; /*
Pointer/hand icon */ float: left; /* Float the
buttons side by side */}.btn-group button:not(:last-child) {  border-right: none; /* Prevent double borders */}/* Clear floats (clearfix hack) */.btn-group:after {

content: «»;  clear: both;  display:
table;}/* Add a background color on hover */.btn-group button:hover {  background-color: #3e8e41;}

Full-width Buttons

To create a full-width button, add the w3-block class to the button.

Full-width buttons have a width of 100%, and spans the entire width of the parent element:

Button

Example

<button class=»w3-button w3-block»>Button</button>
<button class=»w3-button w3-block w3-teal»>Button</button>
<button class=»w3-button w3-block w3-red w3-left-align»>Button</button>
<button class=»w3-btn w3-block»>Button</button>
<button class=»w3-btn w3-block w3-teal»>Button</button>
<button class=»w3-btn w3-block w3-red w3-left-align»>Button</button>

Tip: Align the button text with the w3-left-align
class or the w3-right-align class.

The size of the a block can be defined using style=»width:».

Button
Button
Button

Example

<button class=»w3-button w3-block w3-black»
style=»width:30%»>Button</button>
<button class=»w3-button w3-block w3-teal» style=»width:50%»>Button</button>
<button class=»w3-button w3-block w3-red» style=»width:80%»>Button</button>

Генераторы изображений кнопок

Da Button Factory

Простой и удобный кнопочный генератор, поддерживает русский текст (вы можете написать на кнопке кириллицей). Возможности: создание градиента, тени, обводки, закругление углов кнопки, тень текста и др. Здесь же вы можете узнать, как использовать button на сайте или в социальной сети.
CoolText

Самый известный генератор креативных надписей, логотипов и кнопок. Множество интересных эффектов ждет вас. В том числе и анимированных.

Стильные кнопки со своими надписями создаем здесь. Примечание — для того, чтобы подписать кнопку русским текстов, измените шрифт на Arial, Arial Bold, Comic Sans Serif, Tahoma, некоторые другие также поддерживают кириллицу.

Многофункциональный мейкер кнопок. Задаем шрихи, градиенты, блики, загружаем изображение и пишем свой текст. Пример из генератора:
Button Maker

Создает кнопки в виде обычных, с текстурной заливкой, стикеры и стрелки с надписями. К сожалению, только подписчикам сайта возможно сохранять кнопки, но никто не запретит вам делать скриншоты. А если немного умеете пользоваться фотошопом или Гимп, то и убирать фон. Вот результат данного сайта:
Webestools- надписи на кнопках-картинках только на английском языке. Это главный недостаток. Пример:
Imagefu Button
Простой англоязычный сервис, кириллические шрифты +.
Button Optimizer
Здесь можно создать не только кнопку в png формате, но и получить код css и html с эффектами наведения. Поддержка русского языка.

Стилизация старого доброго элемента button

More

Images

Время плавного перехода

Images

More

Button Bars

Example

Example

Example

Example

Images

Button Shapes

Example

Menus

How To Style Round Buttons

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

Images

Основы CSS кнопок

Единица rem: смесь px и em

More

Images

How To Add Button over Image

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

Menus

Disabled Buttons

Example

Text Buttons with Individual Backgrounds

Example

More

Как сделать кнопку в HTML?

Images

More

Images

More

Кнопка Submit

Как задаются размеры

Menus

How To Create a Button Group

Step 1) Add HTML:

Step 2) Add CSS:

Full-width Buttons

Example

Example

Генераторы изображений кнопок