Создадим красивую кнопку с градиентом на CSS и со значком Font Awesome. В этом примере код HTML создает кнопку с именем класса gradient-btn и включает значок Font Awesome внутри кнопки.

Создадим 5 красивых кнопок со значками на CSS, используя значки Font Awesome. В этом примере код HTML создает 5 кнопок с разными именами классов и включает значки Font Awesome внутри кнопок.

Создадим 5 красивых анимированных кнопок на CSS3. В этом примере код HTML создает 5 кнопок с разными именами классов. Код CSS стилизует и анимирует кнопки с помощью псевдокласса :hover, который запускает анимацию, когда пользователь наводит курсор на кнопку.

Подсказка при наведении (ее еще называют тултип) показывает блок с текстом при наведении на элемент. Тултип показывает справочную информацию о содержимом элемента.

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

Радиокнопки используются для выбора одного из множества значений. Если текст радиокнопки короткий, то уместно использовать переключатель. Такой вариант мы реализуем в этой статье с использованием чистого CSS.

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

Переключатель (его еще называют тумблер) помогает выбрать два состояния. Например, включение или отключение темной темы на сайте. Чисто функционально переключатель — это тот же самый чекбокс.

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

Карточки с товарами — неотъемлемая часть любого интернет-магазина. Они позволяют в удобном виде презентовать товары или услуги потенциальному клиенту. В этой статье мы сделаем верстку карточек товаров, выведем их в сетку, а также адаптируем сетку под мобильные устройства.