Меню

Css как поменять цвет кнопки



CSS Buttons — Кнопки

Узнайте, как стиль кнопок с помощью CSS.

Основные стили кнопок

Кнопка по умолчанию Кнопка CSS

Пример

Цвета кнопок

Используйте свойство background-color для изменения цвета фона кнопки:

Пример

Размеры кнопок

Используйте свойство font-size для изменения размера шрифта кнопки:

Пример

Используйте свойство padding для изменения заполнения кнопки:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Пример

Закругленные кнопки

Используйте свойство border-radius для добавления скругленных углов к кнопке:

Пример

Цветные границы кнопок

Используйте свойство border , чтобы добавить цветную рамку к кнопке:

Пример

Наведите кнопки

Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.

Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:

Пример

.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>

.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.

Кнопки теней

Use the box-shadow property to add shadows to a button:

Пример

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Отключенные кнопки

Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).

Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:

Пример

Ширина кнопки

По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:

Пример

Группы кнопок

Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:

Пример

Группа кнопок на границе

Используйте свойство border для создания группы кнопок с рамками:

Пример

Вертикальная группа кнопок

Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:

Источник

Сборник CSS кодов

Вы можете легко настроить внешний вид вашего магазина, используя каскадные таблицы стилей (CSS). В этом сборнике собрана коллекция кодов CSS, которая поможет вам сделать магазин на Эквиде таким, каким вы хотите. Сборник не является исчерпывающим. Меняя HTML-шаблоны и таблицу стилей CSS, количество улучшений, которые вы можете сделать, ограничено только вашим воображением.

Если вы новичок в CSS, ознакомьтесь со следующими уроками, чтобы научиться быстрее:

  • Знакомство с CSS – курс CSS для начинающих даcт вам достаточно, чтобы начать.
  • Примеры CSS познакомят вас с практическими примерами, которые вы можете применить для себя.

Коллекция CSS кодов (индекс)

Этот сборник поделен на разделы, посвященные разным элементам Эквида. Каждый раздел содержит CSS-коды, которые вы можете использовать как есть, отредактировать или изменить.

В этой статье подробная инструкция, как добавить CSS-коды в ваш магазин →

Кнопки

Шрифты

Сетка товаров (Главная страница магазина)

Страница категории

Страница товара

Корзина

Строка поиска

Оформление заказа

Кнопки

В вашем магазине много больших и маленьких кнопок, таких как «Добавить в корзину» или «Продолжить». Вы можете изменить их все сразу или по отдельности.

Изменение цвета всех больших кнопок одновременно

Большие кнопки в вашем магазине включают Купить, Добавить в корзину на странице товара, Продолжить, Оформить заказ. Используйте следующий код CSS, чтобы обновить все большие кнопки одновременно. Измените «# F0F8FF» и «black» в примере на любой понравившийся вам цвет:

Изменение цвета кнопки «Добавить в корзину»

Замените # FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Читайте также:  Какого цвета модель водорода

Изменение цвета кнопки «Купить»

Кнопка «Купить» отображается на страницах категорий. Замените #FFFAFA (белоснежный) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета кнопки «Оформить заказ»

Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета кнопки «Продолжить»

Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета кнопки «Разместить заказ»

Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета всех маленьких кнопок одновременно

Вы также можете изменить маленькие кнопки, такие как Добавить еще, Перейти к оформлению заказа, Продолжить покупки на странице корзины, Очистить корзину. Вот коды для изменения всех этих кнопок одновременно. Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета кнопки «Добавить еще»

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвет кнопки «Перейти к оформлению заказа»

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета кнопки «Продолжить покупки» на странице корзины

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Изменение цвета кнопки «Очистить корзину»

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Размещение кнопки «Купить» на одном уровне

Если названия товаров имеют разную длину, кнопки «Купить» могут быть не выровнены на странице магазина. Чтобы выровнять кнопки по сетке, используйте следующий код:

Скрыть кнопку «Добавить в корзину» на всех страницах товара

Вы можете скрыть кнопку «Добавить в корзину» на всех страницах товара, используя код CSS ниже:

Шрифты

Вы можете установить шрифт и его цвет по умолчанию для всего магазина.

Изменение всех шрифтов

Для изменения шрифта во всем магазине замените NAME_OF_FONT в коде на нужное название шрифта:

Изменение цвета шрифта

Для изменения цвета всех шрифтов одновременно используйте следующий код. Замените # 262626 (очень темно-серый) в примере на любой понравившийся вам цвет:

Сетка товаров (Главная страница магазина)

Сетка товаров — это макет, содержащий несколько товаров, который можно найти в следующих местах:

  • Страницы категории.
  • Раздел Коллекция рекомендуемых товаров на главной странице.
  • Сетка сопутствующих товаров под основным на странице товара.

Изменение цвета и размера шрифта в сетке товара

Измените цвет или размер шрифта цены в сетке товара. Измените «blue» и «20 px» на любой цвет и размер шрифта, который вы хотите.

Отключение эффекта масштабирования для миниатюр товаров

Когда вы помещаете курсор мыши на миниатюру товара, вы видите эффект увеличения. Эта функция включена для всех магазинов на Эквиде по умолчанию. Если вы хотите отключить его для своего интернет-магазина, вы можете использовать этот код CSS:

Помещение значков «Отслеживание заказов», «Избранное», «Корзина», «Вход» в верхней части страницы магазина

Кнопки меню нижнего колонтитула Отслеживать заказы, Избранное, Корзина, Вход по умолчанию расположены в нижней части страницы магазина. Чтобы переместить их в верхнюю часть страницы, вы можете использовать код CSS:

Читайте также:  Какого цвета бывают ящерицы

Скрыть изображения товаров

Этот CSS-код скроет фотографии товаров и изображения, которые подставляются автоматически, если к товару не загружена ни одна фотография:

Страница категории

Магазины с разнообразными товарами используют категории для организации товаров, что помогает покупателям найти то, что они ищут. Вы можете применить изменения стиля к одной категории и/или ко всем категориям одновременно.

Чтобы применить изменения стиля ко всех категориях вашего магазина, используйте CSS класс:
.ec-store__category-page

Если у вас еще нет категорий, все ваши товары относятся к категории «Главная страница магазина» по умолчанию. Чтобы применить изменения стиля ко всем товарам, относящимся к категории главной страницы Магазина, используйте ec-store__category-page — 0 CSS класс.

Центрирование товаров в категориях

Центрируйте товаров на страницах категорий:

Изменить цвета цены на странице определенной категории

Чтобы изменить цвет цены на странице определенной категории, замените «4002» на свой уникальный идентификатор категории. Замените # FFA500 (оранжевый) на цветовой код, который вы хотите использовать в своем магазине.

Отключить эффект масштабирования для миниатюр категории

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

Отключение эффекта наведения для категории названий

Измените следующий селектор:

Отображение одинакового количества категорий в строке

Вы можете отобразить одинаковое количество категорий в строке:

Скрыть картинки и названия категорий

Для категорий без изображений Эквид показывает градиент как изображение-заполнитель в витрине магазина. Вы можете добавить свои собственные изображения или полностью скрыть изображения и названия категорий в магазине:

Скрыть картинки категорий

Для отображения только названий категорий без изображений в магазине:

Скрыть карточки категории на главной странице

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

Страница товара

На странице товара отображается изображение, название, цена, описание и тд. Вы можете изменить внешний вид содержимого, а также скрыть некоторые компоненты.

Изменение цвета и размера шрифта

Измените цвет и размер шрифта на странице товара. Измените # FFA500 (оранжевый) и «20px» на любой цвет и размер шрифта, который вы пожелаете.

Шрифт, цвет и размер цены:

Цвет артикула (SKU):

Цвет поля «Количество товара в наличии»:

Изменение цвета ярлыка «Распродажа»

Измените RED в background-color и border-color на нужный вам цвет:

Показать галерею изображений в полном размере на мобильных телефонах

Добавьте следующий селектор и свойство:

Удаление SKU (артикула) товара

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

  • страница товара
  • страница «Разместить заказ»
  • страница «Спасибо за ваш заказ»
  • страница счета

Скрыть SKU на странице товара:

Скрыть SKU на странице заказа:

Скрыть SKU на странице «Спасибо за Ваш заказ»

Удаление название под детализированным изображением в галерее

Удалите текст под детализированным изображением:

Открыть раздел «Показать больше» на страницах товара

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

Читайте также:  Что такое цвет урины

Показать «Сопутствующие товары» в верхней части страницы

Сопутствующие товары по умолчанию отображаются в нижней части страниц товаров. Чтобы переместить их наверх страницы товара:

Скрыть цену на конкретные товары

Чтобы скрыть цену на странице конкретного товара используйте следующий код изменив «123456» на свой уникальный внутренний идентификатор товара: (Как получить идентификатор товара?)

Скрыть цены от незарегистрированных пользователей

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

Ниже приведен CSS код для скрытия цен и кнопок «В корзину» и «Купить». В этом случае только зарегистрированные клиенты смогут размещать заказы. Не зарегистрированные покупатели смогут только просматривать ваш каталог.

Корзина

Изменить стиль кнопки «Удалить товар»

Ваши клиенты могут удалить товар из корзины с помощью значка «Закрыть» (х). Он появляется при наведении указателя мыши на товар на странице сумки.

Вы можете настроить высоту и / или ширину, чтобы сделать его немного более заметным. Вы также можете изменить изображение, чтобы значок выглядел так, как вам нужно:

Удалить поле «Количество»

Чтобы скрыть поле «Количество» на странице корзины:

Отобразить иконку пустой корзины на Стартовом сайте

По умолчанию иконка корзины есть на Стартовом сайте только в том случае, если в корзину уже добавлен какой-то товар. Но вы можете отображать ее даже если в корзине пока пусто (если хотите).

Раскрыть поле для промо-кода

Вы можете сразу показывать раскрытым поле для ввода промо-кода (и подарочного сертификата) в корзине:

Строка поиска

Поисковый виджет помогает вашим клиентам искать товары в вашем магазине. Вы можете изменить внешний вид самого окна поиска.

Изменить дизайн виджета поиска

Добавьте или измените следующий селектор и свойства. Измените размер и замените цветовые коды, такие как # 000000, на цветовой код, который вы хотите отобразить.

Изменить стиль кнопки поиска

Добавьте или измените следующий селектор и свойства. Замените image / button_search.png реальным абсолютным путем к фоновому изображению. Например: «http://www.example.com/images/button_bg.png»

Изменить окно поиска на Стартовом сайте

Замените # F3F6F9 на цветовой код, который вы хотите отобразить.

Оформление заказа

Удалить время доставки из названий способов доставки

Некоторые перевозчики (например, USPS, FedEx и т. Д.) Добавляют время доставки к названиям способов доставки. Если вы используете онлайн-перевозчик в своем магазине Эквид, вы можете увидеть, что способы доставки отображаются как «U.S.P.S. Priority Mail (1-3 дня)» при оформлении заказа. Можно скрыть это время доставки через CSS:

Добавить логотип для способа оплаты

Логотипы напротив способов оплаты подсказывают покупателям, как именно они смогут оплатить товар или услугу. С помощью CSS-кода вы можете добавить, например, иконки банковских карт, чтобы более наглядно показать клиентам, какие кредитные или дебетовые карты они могут использовать для оплаты заказа.

Используйте этот CSS-код:

где вы должны заменить https://example.com/your_image.jpg на URL вашей картинки с логотипами, а X в :nth-child(X) на номер способа оплаты при оформлении заказа. Например, если вы предлагаете 3 способа оплаты и хотите показывать новые логотипы для второго способа, то в коде необходимо вписать «2», например: :nth-child(2).

Вы можете использовать следующие логотипы кредитных карт:

Источник