Html button style: HTML button style Attribute — Dofactory

html — Как оформить нажатую кнопку в CSS

спросил 5 лет, 5 месяцев назад

Изменено 5 лет, 5 месяцев назад

Просмотрено 391 тысяч раз

Я просмотрел веб-сайт W3 Schools W3Schools, где объясняется, как стилизовать кнопки с помощью CSS. Мне нужно указать стиль кнопки при нажатии. Что такое селектор псевдокласса для этого? например кнопка наведения:

 .кнопка:наведите{
}
 

• HTML
• CSS

5

Сначала эта кнопка будет желтой. При наведении он становится оранжевым. Когда вы нажмете на нее, она станет красной. Я использовал :hover и :focus для адаптации стиля. (Селектор :active обычно используется для ссылок (т.е. тегов ))

 button{
  цвет фона: желтый;
}

кнопка: наведите курсор {фоновый цвет: оранжевый;}

кнопка: фокус {цвет фона: красный;}

а {
  оранжевый цвет;
}

кнопка{
  цвет:зеленый;
  текстовое оформление: нет;
}

а: посетил {
  цвет: фиолетовый;
}

а: активный {
  цвет синий;
} 

 <кнопка>
Наведите и нажмите!





Здравствуйте


Пока 

5

Если вы просто хотите, чтобы кнопка имела другой стиль при нажатии мыши, вы можете использовать псевдокласс :active .

 .кнопка: активная {
}
 

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

Есть три состояния кнопки

• Нормальный: Вы можете выбрать, как это кнопка
• Hover: Вы можете выбрать вот так кнопку : hover
• Нажатие/щелчок: Вы можете выбрать, как эта кнопка : активна

Обычный:

 .кнопка
 {
     //ваш css
 }
 

Активный

 .button:активный
{
        //ваш css
}
 

Наведение

 .кнопка:наведение
{
        //ваш css
}
 

SNIPPET:

Используйте :active для стилизации активного состояния кнопки.

 кнопка:активна{
   цвет фона: красный;
} 

 Click Me 

К сожалению, нет псевдоселектора :click. Если вы хотите изменить стиль при нажатии, вы должны использовать Jquery/Javascript. Это уж точно лучше, чем «халтурить» на чистом HTML/CSS. Но если вы настаиваете…

 ввод {
дисплей: нет;
}
охватывать {
отступ: 20 пикселей;
семейство шрифтов: без засечек;
}
ввод: проверено + диапазон {
  фон: #444;
  цвет: #fff;
} 

 <метка для = "ввод">
  <тип ввода = "радио" />
  НЕТ стилей JS
   

Или, если хотите, вы можете переключить стиль:

 ввод {
дисплей: нет;
}
охватывать {
отступ: 20 пикселей;
семейство шрифтов: без засечек;
}
ввод: проверено + диапазон {
  фон: #444;
  цвет: #fff;
} 

 <метка для = "ввод">
  <тип ввода = "флажок" />
  НЕТ стилей JS
   

2

button:hover — это когда вы наводите курсор на кнопку.
Вместо этого попробуйте button:active … будет работать и для других элементов

 button:active{
  красный цвет;
} 

стилей кнопок css | кнопка css | Кнопка «Все о HTML» Тег

  Тег используется для создания интерактивных кнопок на вашем веб-сайте/веб-странице. У нас есть разница между кнопкой ввода тега или простой кнопкой. Мы также можем добавлять изображения в нашу кнопку или стилизовать текст в теге кнопки.

 

Надеюсь, вы получили лучшее определение кнопки. Давайте пойдем прямо и посмотрим на синтаксис тега

.

 

Нажми меня!

Вывод

Давайте посмотрим Использование стилей CSS

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

Давайте посмотрим пример тега

с CSS

 

Click me

 Вывод

типы кнопок html

 button { 
 background-color: #4CAF50; 
 размер шрифта: 16 пикселей; 
 семейство шрифтов: с засечками; 
 граница: нет; 
 радиус границы: 12 пикселей; 
 цвет: белый; 
 text-shadow: 2px 2px #eeeff; 
 отступ: 15px 32px; 
 выравнивание текста: по центру; 
 украшение текста: нет; дисплей 
 : встроенный блок; 
 }