TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить кнопки 3D CSS Press в Weebly?

12

В нашей предыдущей статье мы увидели, как добавить и настроить элемент кнопки Weebly по умолчанию. Хотя можно изменить кнопки, редактирование существующего стиля кнопок является сложной задачей и часто не работает так, как вы ожидали. Простое решение – встроить свой собственный CSS / HTML с помощью элемента встроенного кода Weebly. Вы не получите параметры настройки при встраивании, однако вы можете легко создать привлекательные кнопки с эффектами CSS. Здесь мы объясняем, как добавить кнопки 3D CSS на сайт Weebly.

Кнопки 3D CSS Press

Ниже показано, как будут выглядеть кнопки 3D-нажатия.

Как добавить кнопки 3D CSS Press в Weebly?

Кнопки имеют следующие особенности:

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

Как добавить кнопки 3D CSS Press в Weebly?

Мы объясним здесь, как добавить 5 кнопок с вышеуказанным 3D-стилем. Вы можете удалить или добавить CSS и соответствующий HTML, чтобы добавить или удалить кнопки и изменить цвет и стили.

Шаг # 1 – Добавление CSS кнопки

Первый шаг – решить, хотите ли вы добавить кнопки только на нескольких страницах или на многих страницах вашего сайта. Если вы хотите добавить несколько страниц, добавьте код CSS только на эти страницы в разделе «Страницы> Выбрать страницу> Настройки SEO> Код заголовка», как показано ниже:

Как добавить кнопки 3D CSS Press в Weebly?

Добавить код заголовка на страницу

Если вы хотите добавить кнопки на несколько страниц, рекомендуется добавить стили CSS во внешнюю таблицу стилей и ссылку на страницу. Weebly по умолчанию имеет только одну внешнюю таблицу стилей для каждого сайта. Перейдите в раздел «Тема> Редактировать HTML / CSS> Стили> main.less». Найдите файл и добавьте код под другими существующими кодами. Сохраните изменения и выйдите из редактора кода.

Как добавить кнопки 3D CSS Press в Weebly?

Редактирование основного файла CSS в Weebly

При использовании редактора кода вам необходимо сохранить тему с произвольным именем. Если вы не хотите редактировать тему, перейдите в раздел «Настройки> SEO> Код заголовка». Здесь вы можете добавить код CSS, который будет применяться ко всем страницам вашего сайта (аналогично редактированию файла main.less).

Как добавить кнопки 3D CSS Press в Weebly?

Добавить код заголовка на уровне сайта Weebly

Вот код CSS для 3D-кнопок:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

Узнайте больше о том, как редактировать исходный CSS / HTML в Weebly.

Шаг # 2 – Добавление HTML-кода

Перетащите элемент кода внедрения на страницу, где вы хотите добавить кнопки, и вставьте внутрь код ниже. Не забудьте заменить # своими ссылками.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Шаг # 3 – Настройка кнопок

Есть бесконечные возможности настроить кнопки по своему усмотрению. Вот некоторые общие сценарии, которые вы, возможно, ищете.

Добавление или удаление кнопок

Предположим, вам нужно всего 3 кнопки вместо 5, как показано в примере. В этом случае вы можете удалить код для 4-й и 5-й кнопок как из CSS, так и из HTML. Но мы бы рекомендовали добавить максимальное количество стилей в CSS, а затем контролировать количество кнопок в HTML. В этом сценарии, когда вам нужны только 3 кнопки, оставьте код CSS без изменений, в котором определены 5 различных стилей, и добавьте код HTML только для 3 кнопок.

Таким образом, вы можете добавить 3 кнопки на одну страницу, 5 кнопок на другую страницу и так далее.

Настройка цвета и размера

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

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее