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

Як додати 3D -кнопки CSS у Weebly?

0

У нашій попередній статті ми побачили, як додати та налаштувати елемент кнопки Weebly за замовчуванням. Хоча кнопки можна змінювати, редагування існуючого стилю кнопок є складним завданням і часто не спрацює так, як ви очікували. Просте рішення – вставити власний власний CSS/HTML за допомогою елемента коду для вбудовування Weebly. Ви не отримаєте варіантів налаштування під час вбудовування, проте ви можете легко створити привабливі кнопки з ефектами CSS. Тут ми пояснюємо, як додати кнопки натискання 3D CSS на веб -сайт Weebly.

3D CSS Натисніть кнопки

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

Як додати 3D -кнопки CSS у Weebly?

Кнопки мають такі функції:

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

Як додати 3D -кнопки CSS у Weebly?

Тут ми пояснимо, як додати 5 кнопок із зазначеним вище 3D -стилем. Ви можете видалити або додати CSS та відповідний HTML, щоб додати або видалити кнопки та змінити колір та стилі.

Крок №1 – Додавання кнопки CSS

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

Як додати 3D -кнопки CSS у Weebly?

Додайте код заголовка на сторінку

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

Як додати 3D -кнопки CSS у Weebly?

Редагування основного файлу CSS у Weebly

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

Як додати 3D -кнопки CSS у 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 кнопок на іншій сторінці тощо.

Налаштування кольорів та розміру

  • Ви можете змінити колір тексту та колір атрибутів кнопки, таких як фон і тінь.
  • Змініть атрибути ширини та висоти, щоб змінити круглу кнопку на овальний розмір або будь -які інші пропорції.

Пам’ятайте, що ви можете використовувати пробіл, щоб додати достатньо місця над та під кнопками. Аналогічно, ви можете розмістити кнопку праворуч або ліворуч від будь -якого іншого елемента, використовуючи пробіл.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі