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

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

Кнопки 3D CSS Press

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

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

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

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

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

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

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

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

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

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

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

Добавить код заголовка на уровне сайта 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 кнопок на другую страницу и так далее.

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

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

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