Как стилями задать градиентный фон для кнопок, пунктов меню

Существует множество сервисов, позволяющих создавать необычные и красивые фоны для элементов на вашем сайте (http://www.colorzilla.com/gradient-editor/, http://www.css3factory.com/linear-gradients/ и т.д.) Данные сервисы генерируют CSS – код, который нужно прописывать в стилях вашего сайта.

Для этого переходим на страницу редактирования Унитемы (Внешний вид – Унитема) Во вкладке Стили вставляем код, сгенерированный с помощью онлайн-генератора или написанный вами.

Для второстепенных кнопок:

.form-submit {

Здесь код генератора

}

Для главных кнопок:

.form-submit.default-submit {

Здесь код генератора

}

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

Если в настройках блока-меню установлены следующие настройки: Шаблон - Многоярусное горизонтальное, а Стиль – Расцвеченный, то вот код, который можете использовать:

 .sf-bg-color.menu-horizontal-multilevel li a {

Здесь код генератора

}

Если Шаблон - горизонтальный, Стиль – Расцвеченный, Всплывающее - нет:

.sf-bg-color.sf-horizontal li a {

Здесь код генератора

}

И так далее… Таким способом вы можете задать фон любому элементу на вашем сайте (блоки, заголовки, абзацы и т.д.)

Для сравнения:

Код, сгенерированный онлайн-сервисом:

background: #f1e767; /* Old browsers */

background: -moz-linear-gradient(-45deg,  #f1e767 0%, #feb645 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg,  #f1e767 0%,#feb645 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg,  #f1e767 0%,#feb645 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(-45deg,  #f1e767 0%,#feb645 100%); /* IE10+ */

background: linear-gradient(135deg,  #f1e767 0%,#feb645 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Главная кнопка на сайте: Главная кнопка

Главная кнопка на сайте c использованием нашего градиента: Главная кнопка

 

PS. Если вы хотите придать ссылке стиль главной кнопки, то скопируйте классы form-submit default-submit в поле Классы CSS во вкладке дополнительно в настройках Вставить/Редактировать ссылку. Если оставить только класс form-submit, то кнопка будет со стилем второстепенной (Второстепенная кнопка: Второстепенная кнопка)

24.03.16 12:28

Ваш комментарий