Как сделать кнопку активной css

Как сделать кнопку активной css

Если вы нажмете кнопку «Сохранить», ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.

Нажав кнопку «Сохранить», вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

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

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Google попросит вас подтвердить доступ к Google диску.

Сохранить файл как: Сохранить файл

Открыть файл из Google диска

Если вы сохранили файл на Google диске, вы можете открыть его здесь:

Открыть файл

Как сделать кнопку по умолчанию активной?

Кнопке можно назначить активный (нажатый) вид, а также заблокированное состояние. Класс .active отображает, как кнопка выглядит во время нажатия, а класс .disabled делает ее неактивной.

– user269127
7 окт 2017 в 15:35
@Cricket и ответ стоит писать как ответ, а не как комментарий)
– user212578
7 окт 2017 в 15:37

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вы можете использовать атрибут autofocus — Подробнее.

Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.

#buttons .butn < padding: 3px 15px 3px 15px; border: 1px solid #ebebeb; border-radius: 3px; background-color: white; color: #bababa; font-size: 14px; >#buttons .butn:focus

 
 
 
All Web Design Mobile App Illustration Photography 
 
 

:active

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

/* Любой элемент , который будет активирован */ a:active  color: red; > 

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link , :hover и :visited , описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active .

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

Синтаксис

Error: could not find syntax for this item

Пример

Активные ссылки

HTML

p> Этот абзац содержит ссылку: a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.a> У абзаца фон станет серым при нажатии на него или на ссылку. p> 

CSS

/* Непосещённые ссылки */ a:link  color: blue; > /* Посещённые ссылки */ a:visited  color: purple; > /* Ссылки при наведении */ a:hover  background: yellow; > /* Активные ссылки */ a:active  color: red; > /* Активные абзацы */ p:active  background: #eee; > 

Результат

Активные элементы формы

HTML

form> label for="my-button">Моя кнопка: label> button id="my-button" type="button"> Попробуй Нажать Меня или Мою подсказку! button> form> 

CSS

form :active  color: red; > form button  background: white; > 

Result

Спецификации

Specification
HTML Standard # selector-active
Selectors Level 4 # the-active-pseudo

Совместимость с браузерами

BCD tables only load in the browser

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

• Псевдоклассы, связанные с ссылками: :link , :visited и :hover .

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 11 окт. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

HTML тег

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

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor.

Атрибуты

autofocus: Указывает браузеру, что кнопка должна получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

disabled: Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами:

form: Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм:

    Имя:  
Фамилия: 
Кнопка находится вне элемента form, но является частью формы.
 Отправить   

Примечание: атрибут не поддерживается в Internet Explorer.

formaction: Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение:

    
Имя:  
Фамилия:  
Отправить 
 Отправить от имени администратора 
   

Атрибут formaction используется только для кнопок с атрибутом type=»submit».

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

• application/x-www-form-urlencoded — все символы кодируются перед отправкой (значение по умолчанию).
• multipart/form-data — символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
• text/plain — пробелы преобразуются в символ «+», но символы не кодируются.

    
Имя:  
Отправить с кодирование символов Отправить без кодирования символов 
   

Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

• get — данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
• post — отправляет данные формы, как HTTP после транзакции

    
Имя:  
Фамилия:  
Отправить Отправить используя POST 
   

Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formnovalidate: Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type=»submit». Значения для логического атрибута autofocus можно задавать следующими способами:

Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

• _blank — открывает ответ в новом окне или вкладке.
• _self — открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
• _parent — открывает ответ в родительском окне.
• _top — открывает ответ во всю ширину окна.
• имя_фрейма — открывает ответ в iframe, имя которого было указано в качестве значения.

    
Имя:  
Фамилия:  
Отправить Оправить и открыть ответ в новом окне 
   

Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

name: Указывает имя для элемента . Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript.

    
Выберите одно из двух: HTML CSS 
   

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

• button — активная кнопка
• reset — кнопка, очищающая форму от введенных данных
• submit — кнопка для отправки данных формы (значение по умолчанию)

    
Имя:  
Фамилия:  
Отправить Стереть 
   

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

value: Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Примечание: если вы используете элемент в HTML-форме, то IE7 и более ранние версии этого браузера, при отправке формы будут отправлять текст располагающийся между и . В то время как другие браузеры будут отправлять содержимое атрибута value.

Стиль по умолчанию

Пример

Нажми на меня! 

Результат данного примера в окне браузера: