HTML/CSS. Настройка стилей кнопок

Julia Rovena Декабрь 26, 2011

active button css hover HTML

Rating: 4.6/5. From 5 votes.

Please wait...

Это обучающее видео показывает, как создать новую кнопку в HTML и настроить ее стиль с помощью CSS.

1) Сперва нужно добавить кнопку в HTML файле. Самые легкий способ это сделать – это использовать стандартные теги <a>. К примеру, вот этот код:

<a class="button" href="#">Button_text_here</a>

2) Создайте новый стиль для кнопки в файле style.css: выберите цвет фона (background color), ширину (width) and отступ. Например:

  .button1 {background:#000000;padding:5px;}

3) Стиль кнопки при наведении на нее курсора мыши создается точно также. Вам нужно создать CSS класс ".button_name:hover":

  .button1:hover {background:#FF0000; padding:5px;}

4) Сохраните изменения в HTML и CSS файлах и откройте сайт для просмотра изменений.

Эта запись была размещена в Работа с CSS, Работа с HTML и помечена как active, button, css, hover, HTML. Добавьте в закладки постоянную ссылку.