Как сделать — Текстовые кнопки
Узнать, как стилизовать текстовые кнопки с помощью CSS.
Успех Информация Предупреждение Опасность По умолчанию
Стиль кнопки текста
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Чтобы получить вид «текстовой кнопки», мы удаляем цвет фона и границу по умолчанию:
Пример
.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>
/* При наведении курсора мыши */
.btn:hover
Текстовые кнопки с индивидуальным фоном
Текстовые кнопки с определенным цветом фона при наведении курсора:
Пример
.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>
.success:hover background-color: #4CAF50;
color: white;
>
.info:hover background: #2196F3;
color: white;
>
/* Оранжевый */
.warning color: orange;
>
.warning:hover background: #ff9800;
color: white;
>
.danger:hover background: #f44336;
color: white;
>
.default:hover background: #e7e7e7;
>
Зайдите на наш учебникCSS Кнопки чтобы узнать больше о том, как стилизовать кнопки.
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.